Useful for responsive design, determining same max-width used in @media queries
var windowWidth = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth;
Based on: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
"The responsive viewport breakpoint "staircase" in my opinion becomes:
320px, 480px, 603px, 768px, 966px, 1024px"
See: http://www.hardweb.com.au/nexus7viewportportrait603x797landscape966x444.html
Also read:
http://alistapart.com/article/vexing-viewports
Been working recently on Google DFP tag code, so keeping these references:
http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website
https://productforums.google.com/forum/#!msg/dfp/gxHN91Z7PoI/yC14WsR0KoMJ
http://stackoverflow.com/questions/15423189/changing-ad-size-based-on-browser-width-in-dfp
http://stackoverflow.com/questions/15452905/adding-a-browser-width-component-to-ad-slots
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#showValue").click(function () {
var windowWidth = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth;
$("#widthLabel").text(windowWidth);
$("#windowinnerWidth").text(window.innerWidth);
$("#documentdocumentElementclientWidth").text(document.documentElement.clientWidth);
$("#documentbodyclientWidth").text(document.body.clientWidth);
$("#viewportHeight").text($(window).height());
});
});//]]>
</script>
</head>
<body>
<p>Width: <span id="widthLabel"></span>
<br/>window.innerWidth: <span id="windowinnerWidth"></span>
<br/>document.documentElement.clientWidth: <span
id="documentdocumentElementclientWidth"></span>
<br/>document.body.clientWidth: <span id="documentbodyclientWidth"></span>
<br/>$(window).height(): <span id="viewportHeight"></span>
</p>
<input id="showValue" type="button" value="Show Width" />
</body>
</html>
No comments:
Post a Comment