Are the viewport in mobile phones based on the screen resolution or the mobile browser? Here are some popular mobile browser viewport sizes:
-Opera Mobile browser viewport 850px
-iPhone safari browser viewport 980px
-iPad (landscape & portrait mode) viewport 980px mobile device? -Android browser viewport 800px
-IE mobile browser viewport 320px source. But is the viewport size scaled by resolution of the
On
The mobile viewport size is based on the the CSS pixel ratio, for example, My device(Mi A1) has a resolution of 1080x1920 with 2.55 CSS pixel ratio, the viewport on this device is calculated as
( 1080 / 2.55 ) x ( 1920 / 2.55 ) = 424 x 753.
A pixel ratio of 2.55 means for every 2.55 physical pixels on the device,CSS maps 1 pixel. As today's mobiles have higher resolution on small screens, The media queries in CSS refer to the calculated viewport and not the physical resolution while rendering pages on mobile phones to give a larger view of the page due to small real estate of the mobiles.
Whereas, this is not the case with laptops because with higher resolution they come with larger real estate. My laptop has a screen resolution of 1366x768 pixels and when I check it's viewport size that to turns out to be 1366x768 on default zoom (when viewed full-screen).
<body>
<p id="vpPara"></p>
<p>Changes with zoom-in and zoom-out</p>
<span id="vpSpan"></span>
<p id="screenPara"></p>
<script>
document.getElementsByTagName("body")[0].onload = function(){ vpSize();}
document.getElementsByTagName("body")[0].onresize = function(){ vpSize();}
var cnt = 0;
function vpSize() {
cnt += 1;
var w = document.documentElement.clientWidth,
h = document.documentElement.clientHeight,
screenW = screen.width,
screenH = screen.height;
//document.getElementById("p1").innerHTML = w + "x" + h;
document.getElementById("vpPara").innerHTML = "Viewport Resolution :" + w + "x" + h;
document.getElementById("vpSpan").innerHTML = "resize called "+ cnt +" times";
document.getElementById("screenPara").innerHTML = "Screen Resolution :" + screenW + "x" + screenH;
}
</script>
</body>
Technically, mobile devices feature two viewport sizes, the layout viewport and the visual viewport.
The layout viewport is fixed as it is based on the width and height of the screen of the physical device. Its dimensions can be accessed with the
screen.widthandscreen.heightproperties in JavaScript anddevice-widthfor the purpose of media queries in CSS3.The visual viewport is determined by the width and height of the browser window. Its dimensions can be accessed with the
window.innerWidthandwindow.innerHeightproperties in JavaScript andwidthfor the purpose of media queries in CSS3.