StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use Javascript to get the viewport width and height. Then pass the values back via a hidden form input or ajax.</p> <h2>At its simplest</h2> <pre><code>var width = $(window).width(); var height = $(window).height(); </code></pre> <h2>Complete method using hidden form inputs</h2> <p>Assuming you have: <a href="http://jquery.com/" rel="nofollow noreferrer">JQuery framework</a>.</p> <p>First, add these hidden form inputs to store the width and height until postback.</p> <pre><code><asp:HiddenField ID="width" runat="server" /> <asp:HiddenField ID="height" runat="server" /> </code></pre> <p>Next we want to get the window (viewport) width and height. JQuery has two methods for this, aptly named width() and height().</p> <p>Add the following code to your .aspx file within the head element.</p> <pre><code><script type="text/javascript"> $(document).ready(function() { $("#width").val() = $(window).width(); $("#height").val() = $(window).height(); }); </script> </code></pre> <p><strong>Result</strong></p> <p>This will result in the width and height of the browser window being available on postback. Just access the hidden form inputs like this:</p> <pre><code>var TheBrowserWidth = width.Value; var TheBrowserHeight = height.Value; </code></pre> <p>This method provides the height and width upon postback, but not on the intial page load. </p> <p><strong><em>Note on UpdatePanels:</strong> If you are posting back via UpdatePanels, I believe the hidden inputs need to be within the UpdatePanel.</em></p> <p>Alternatively you can post back the values via an ajax call. This is useful if you want to react to window resizing.</p> <p><strong>Update for jquery 3.1.1</strong></p> <p>I had to change the JavaScript to:</p> <pre><code>$("#width").val($(window).width()); $("#height").val($(window).height()); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload