viewport dimension problem

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

viewport dimension problem

Post by tcloud »

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>
scp-pyhton
Posts: 2
Joined: August 4th, 2017, 7:08 pm

Re: viewport dimension problem

Post by scp-pyhton »

I can confirm that. I opened that page on a Samsung S6 and got 360 x 568 with Firefox (android) v.56
With Samsung's browser (based on Chrominium) it is 360 x 536
and with Chrome it is 360 x 560 I believe the reason is because of the default menus the browsers place at the bottom or the top of their windows. The width is the same in each browser window.
tcloud
Posts: 10
Joined: November 2nd, 2005, 11:43 am

Re: viewport dimension problem

Post by tcloud »

My experience I mentioned is using the exact same browser and the exact same computer. The only difference is opening the file in two different ways -- one using FireFox reading the file as plain HTML and then opening it using XAMPP localhost server -- and in two different windows during the same session with the same instance of the browser so I could switch back and forth.
Post Reply