3

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

Fixed Width Images

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 enter image description here

EDIT

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>
Cesar
  • 4,076
  • 8
  • 44
  • 68
  • If I had to guess, I would say that is simply showing the true pixel count, or how many pixels it is on your screen. Tablets and Phones tend to have a lower pixel count, so the same size image needs more pixels to display properly on your desktop. But there is only so much we can do if you don't actually provide your code. – Lee A. Feb 23 '18 at 21:50
  • Hi @LeeA. Please see my edits. Thanks! – Cesar Feb 23 '18 at 22:35
  • Cesar, I just loaded it on mine and checked, and the issue here is definitely just the different ways that desktops and mobile devices handle pixels. https://i.imgur.com/BQmlkva.png The true size of that square is 368x368, but the browser recognizes that the mobile device has a higher pixel concentration, so it tries to show the correct number in both places and gets confused. Shouldn't impact anything in the long run, just a visual issue. (And sorry, I said it backwards in my first comment, it's mobile devices that have a higher pixelcount.) – Lee A. Feb 23 '18 at 22:48
  • Thanks for checking, I've also found some issues with fixed images width. If a put a 720px image width it does not cover the full device width. It's weird as I've checked this in another device and got the same results. – Cesar Feb 23 '18 at 23:21
  • Are you are talking about the small margin around the edge of the image? This is due to the default margin on the body tag. https://stackoverflow.com/questions/13127887/html-default-body-margin – Turnip Feb 24 '18 at 15:59
  • @Turnip not. I changed the test code, the issue was answered by Kornel – Cesar Feb 24 '18 at 18:19

1 Answers1

4

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">
Kornel
  • 97,764
  • 37
  • 219
  • 309