How can I get the exact height and width of the currently open browser screen window?
How can I get the exact height and width of the currently open browser screen window?
Here's an Ajax, asxh handler and session variables approach:
Handler:
using System;
using System.Web;
public class windowSize : IHttpHandler , System.Web.SessionState.IRequiresSessionState {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
var json = new System.Web.Script.Serialization.JavaScriptSerializer();
var output = json.Serialize(new { isFirst = context.Session["BrowserWidth"] == null });
context.Response.Write(output);
context.Session["BrowserWidth"] = context.Request.QueryString["Width"];
context.Session["BrowserHeight"] = context.Request.QueryString["Height"];
}
public bool IsReusable
{
get { throw new NotImplementedException(); }
}
}
Javascript:
window.onresize = function (event) {
SetWidthHeight();
}
function SetWidthHeight() {
var height = $(window).height();
var width = $(window).width();
$.ajax({
url: "windowSize.ashx",
data: {
'Height': height,
'Width': width
},
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (data) {
if (data.isFirst) {
window.location.reload();
};
}).fail(function (xhr) {
alert("Problem to retrieve browser size.");
});
}
$(function () {
SetWidthHeight();
});
On aspx file:
...
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/BrowserWindowSize.js"></script>
...
<asp:Label ID="lblDim" runat="server" Text=""></asp:Label>
...
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (Session["BrowserWidth"] != null)
{
// Do all code here to avoid double execution first time
// ....
lblDim.Text = "Width: " + Session["BrowserWidth"] + " Height: " + Session["BrowserHeight"];
}
}
Source: https://techbrij.com/browser-height-width-server-responsive-design-asp-net
Here how I solved it using Cookies:
First of all, inside the website main script:
var browserWindowSize = getCookie("_browserWindowSize");
var newSize = $(window).width() + "," + $(window).height();
var reloadForCookieRefresh = false;
if (browserWindowSize == undefined || browserWindowSize == null || newSize != browserWindowSize) {
setCookie("_browserWindowSize", newSize, 30);
reloadForCookieRefresh = true;
}
if (reloadForCookieRefresh)
window.location.reload();
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
And inside MVC action filter:
public class SetCurrentRequestDataFilter : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
// currentRequestService is registered per web request using IoC
var currentRequestService = iocResolver.Resolve<ICurrentRequestService>();
if (filterContext.HttpContext.Request.Cookies.AllKeys.Contains("_browserWindowSize"))
{
var browserWindowSize = filterContext.HttpContext.Request.Cookies.Get("_browserWindowSize").Value.Split(',');
currentRequestService.browserWindowWidth = int.Parse(browserWindowSize[0]);
currentRequestService.browserWindowHeight = int.Parse(browserWindowSize[1]);
}
}
}