How can I get the exact height and width of the currently open browser screen window?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You can use Javascript to get the viewport width and height. Then pass the values back via a hidden form input or ajax.
At its simplest
var width = $(window).width(); var height = $(window).height();
Assuming you have: JQuery framework.
First, add these hidden form inputs to store the width and height until postback.
<asp:HiddenField ID="width" runat="server" /> <asp:HiddenField ID="height" runat="server" />
Next we want to get the window (viewport) width and height. JQuery has two methods for this, aptly named width() and height().
Add the following code to your .aspx file within the head element.
<script type="text/javascript">
$(document).ready(function() {
$("#width").val() = $(window).width();
$("#height").val() = $(window).height();
});
</script>
Result
This will result in the width and height of the browser window being available on postback. Just access the hidden form inputs like this:
var TheBrowserWidth = width.Value; var TheBrowserHeight = height.Value;
This method provides the height and width upon postback, but not on the intial page load.
Note on UpdatePanels: If you are posting back via UpdatePanels, I believe the hidden inputs need to be within the UpdatePanel.
Alternatively you can post back the values via an ajax call. This is useful if you want to react to window resizing.
Update for jquery 3.1.1
I had to change the JavaScript to:
$("#width").val($(window).width());
$("#height").val($(window).height());
Method 2
So here is how you will do it.
Write a javascript function which fires whenever the window is resized.
window.onresize = function(event) {
var height=$(window).height();
var width=$(window).width();
$.ajax({
url: "/getwindowsize.ashx",
type: "POST",
data : { Height: height,
Width:width,
selectedValue:selectedValue },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// do stuff
}
}
Codebehind of Handler:
public class getwindowsize : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
string Height = context.Request.QueryString["Height"];
string Width = context.Request.QueryString["Width"];
}
Method 3
I went with using the regex from detectmobilebrowser.com to check against the user-agent string. Even tho it says it was last updated in 2014 it was accurate on the devices I tested.
Here is the C# code I got from them at the time of submitting this answer:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Text.RegularExpressions" %>
<%
string u = Request.ServerVariables["HTTP_USER_AGENT"];
Regex b = new Regex(@"(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4)))) {
Response.Redirect("http://detectmobilebrowser.com/mobile");
}
%>
Method 4
There is a solution to solve page_onload problem (can’t get size until page load complete) : Create a userControl :
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ClientSizeDetector.ascx.vb" Inherits="Project_UserControls_ClientSizeDetector" %> <%If (IsFirstTime) Then%> <script type="text/javascript"> var pageURL = window.location.href.search(/?/) > 0 ? "&" : "?"; window.location.href = window.location.href + pageURL + "clientHeight=" + window.innerHeight + "&clientWidth=" + window.innerWidth; </script> <%End If%>
Code behind :
Private _isFirstTime As Boolean = False
Private _clientWidth As Integer = 0
Private _clientHeight As Integer = 0
Public Property ClientWidth() As Integer
Get
Return _clientWidth
End Get
Set(value As Integer)
_clientWidth = value
End Set
End Property
Public Property ClientHeight() As Integer
Get
Return _clientHeight
End Get
Set(value As Integer)
_clientHeight = value
End Set
End Property
public Property IsFirstTime() As Boolean
Get
Return _isFirstTime
End Get
Set(value As Boolean)
_isFirstTime = value
End Set
End Property
Protected Overrides Sub OnInit(e As EventArgs)
If (String.IsNullOrEmpty(Request.QueryString("clientHeight")) Or String.IsNullOrEmpty(Request.QueryString("clientWidth"))) Then
Me._isFirstTime = True
Else
Integer.TryParse(Request.QueryString("clientHeight").ToString(), ClientHeight)
Integer.TryParse(Request.QueryString("clientWidth").ToString(), ClientWidth)
Me._isFirstTime = False
End If
End Sub
So after, you can call your control properties
Method 5
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
Method 6
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]);
}
}
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0