Menu
I'm sure I'm missing something here.
Why this 100% width image is bigger than window.screen.width * window.devicePixelRatio
If the screen width equals to 360px and the device ratio is 2
Shouldn't this 100% width image equals to 720px instead of the reported 964px
Also if I put a 720px image it does not cover the full device width???
Note that this is on my real device, a moto g4 play with a 720x1280 screen resolution
When I run this code, the reported width if the image is 964px in my case.
This code is also here http://li209-135.members.linode.com/
It should be viewed in a mobile browser.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
$('#log').append('<p style="font-size:2em;">Screen Width: ' + window.screen.width + '</p>');
$('#log').append('<p style="font-size:2em;"> Device Pixel Ratio: ' + window.devicePixelRatio + '</p>');
$('#log').append('<p style="font-size:2em;"> Image Width: ' + $('#test-image').width() + '</p>');
});
</script>
</head>
<body>
<img id="test-image" width="100%" src="http://via.placeholder.com/100x100">
<div id="log"></div>
<br>
<img id="test-image" width="360px" src="http://via.placeholder.com/360x100">
<br>
<img id="test-image" width="720px" src="http://via.placeholder.com/720x100">
</body>
</html>
585
The dimensions are scaled or fake, because mobile browsers emulate desktop browsers for compatibility with non-mobile pages.
By default, pages in mobile browsers are rendered on a 960-pixel wide virtual screen, which is then scaled down to the actual screen size (or zoomed, etc.). This article describes this process in depth: https://www.quirksmode.org/mobile/viewports.html
To have your page dimensions closer to the actual device screen size, you need to add:
<meta name="viewport" content="width=device-width,initial-scale=1">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
