MozillaZine

viewport dimension problem

Discussion of bugs in Mozilla Firefox
tcloud
 
Posts: 9
Joined: November 2nd, 2005, 11:43 am

Post Posted May 5th, 2017, 2:02 pm

viewport dimension problem

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.

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


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.

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>&times;<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>

Return to Firefox Bugs


Who is online

Users browsing this forum: No registered users and 1 guest