Why this 100% width image is bigger than screen width * device pixel ratio

Cesar Published at Dev

216

Cesar

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

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>

Kornel

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">

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-10-28

Comments

0 comments

Background image width is bigger than 100vw