Jump to content

When querying window height, what does the browser include?


612wharfavenue

Recommended Posts

Im using media queries min-height to create a responsive layout, but it just occured to me that im not entirely sure what part of the browser is considered, if it just the viewport, the viewport and toolbars, or the entire browser. I found a thread about someone having problems with queries in firefox 9 getting them to work at all, and someone left an interesting note:

I may be a few months late, but I actually encountered this today, and wanted to share the solution. It's actually not a CSS or CSS interpretation problem at all--it's the way Firefox does (or doesn't) resize the viewport. Unlike Google Chrome, and most other browsers, Firefox allows it's toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them. You'll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.
What are your experiences with this? .
Link to comment
Share on other sites

Nm, im too impatient, i found a script that polls viewport size then matched that using the snipping tool, turns out they all report correctly using only the viewport. Here's the code if anyone wants:

<script type="text/javascript"><!--  var viewportwidth; var viewportheight;  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight  if (typeof window.innerWidth != 'undefined') {	  viewportwidth = window.innerWidth,	  viewportheight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)  else if (typeof document.documentElement != 'undefined'	 && typeof document.documentElement.clientWidth !=	 'undefined' && document.documentElement.clientWidth != 0) {	   viewportwidth = document.documentElement.clientWidth,	   viewportheight = document.documentElement.clientHeight }  // older versions of IE  else {	   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,	   viewportheight = document.getElementsByTagName('body')[0].clientHeight }document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');//--></script>		   

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...