Firefox returns a different viewport size (for me) when opening an HTML file directly (double-click or drag-and-drop onto Firefox) than when opening in localhost using XAMPP. This makes developing responsive pages difficult.
There is no difference when using chrome.
The HTML file below will illustrate. Save it as an HTML file -- e.g. "viewport.htm" -- and open it with Firefox and then open it through local server (XAMPP). If your experience is like mine, the width and height will be different.System Info:
Windows 10 Pro, 64-bit, ver. 10.0.14393 Build 14393
i7-2600 CPU @ 3.40GHz
RAM 10 GB
local server:
XAMPP for Windows 5.6.19
Browsers:
Firefox 53.0.2
Chrome 58.0.3029.96
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>What is my viewport</title>
<meta name="viewport" content="user-scalable=0, width=device-width, maximum-scale=1.0">
<style>
.linebehind {
position:relative;
z-index:1;
}
.linebehind:before {
border-top:2px solid #dfdfdf;
content:"";
margin:0 auto;
position:absolute;
top:50%;
left:0;
right:0;
bottom:0;
width:95%;
z-index:-1;
}
.linebehind span {
background:#fff;
padding:0 15px;
}
.center { text-align:center; background:#f00; }
</style>
</head>
<body>
<div class="linebehind center">
<span>
<span id="w"></span>×<span id="h"></span>
</span>
</div>
<script>
/*!
* verge 1.9.1+201402130803
* https://github.com/ryanve/verge
* MIT License 2013 Ryan Van Etten
*/
!function(a,b,c){"undefined"!=typeof module&&module.exports?module.exports=c():a[b]=c()}(this,"verge",function(){function a(){return{width:k(),height:l()}}function b(a,b){var c={};return b=+b||0,c.width=(c.right=a.right+b)-(c.left=a.left-b),c.height=(c.bottom=a.bottom+b)-(c.top=a.top-b),c}function c(a,c){return a=a&&!a.nodeType?a[0]:a,a&&1===a.nodeType?b(a.getBoundingClientRect(),c):!1}function d(b){b=null==b?a():1===b.nodeType?c(b):b;var d=b.height,e=b.width;return d="function"==typeof d?d.call(b):d,e="function"==typeof e?e.call(b):e,e/d}var e={},f="undefined"!=typeof window&&window,g="undefined"!=typeof document&&document,h=g&&g.documentElement,i=f.matchMedia||f.msMatchMedia,j=i?function(a){return!!i.call(f,a).matches}:function(){return!1},k=e.viewportW=function(){var a=h.clientWidth,b=f.innerWidth;return b>a?b:a},l=e.viewportH=function(){var a=h.clientHeight,b=f.innerHeight;return b>a?b:a};return e.mq=j,e.matchMedia=i?function(){return i.apply(f,arguments)}:function(){return{}},e.viewport=a,e.scrollX=function(){return f.pageXOffset||h.scrollLeft},e.scrollY=function(){return f.pageYOffset||h.scrollTop},e.rectangle=c,e.aspect=d,e.inX=function(a,b){var d=c(a,b);return!!d&&d.right>=0&&d.left<=k()},e.inY=function(a,b){var d=c(a,b);return!!d&&d.bottom>=0&&d.top<=l()},e.inViewport=function(a,b){var d=c(a,b);return!!d&&d.bottom>=0&&d.right>=0&&d.top<=l()&&d.left<=k()},e});
if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', displayViewport, false);
window.addEventListener('resize', displayViewport, false);
window.addEventListener('orientationchange', displayViewport, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', displayViewport);
window.attachEvent('onresize', displayViewport);
window.attachEvent('onorientationchange', displayViewport);
}
function displayViewport(event) {
document.getElementById('w').innerHTML = verge.viewportW();
document.getElementById('h').innerHTML = verge.viewportH();
}
</script>
</body>
</html>