为什么这个100％宽度的图像大于屏幕宽度*设备像素比率

时间：2018-02-23 21:34:52

标签： html css highdpi

我确定我在这里遗漏了一些东西。

为什么这个100％宽度的图像大于window.screen.width * window.devicePixelRatio

如果屏幕宽度等于 360px 且设备比率 2

这个100％宽度的图片不应该等于 720px 而不是报告的 964px

固定宽度图像

另外，如果我放一个720px的图像，它不会覆盖整个设备的宽度???

请注意，这是在我的真实设备上，具有720x1280屏幕分辨率的moto g4播放 enter image description here

修改

当我运行此代码时，如果图像在我的情况下为964px，则报告的宽度。

此代码也在http://li209-135.members.linode.com/

应该在移动浏览器中查看。

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

1 个答案:

答案 0 :(得分：4)

维度是缩放的或假的，因为移动浏览器会模拟桌面浏览器以与非移动页面兼容。

默认情况下，移动浏览器中的页面会在960像素宽的虚拟屏幕上呈现，然后缩小到实际的屏幕尺寸（或缩放等）。本文将深入介绍此过程： https://www.quirksmode.org/mobile/viewports.html

要使您的页面尺寸更接近实际的设备屏幕尺寸，您需要添加：

 <meta name="viewport" content="width=device-width,initial-scale=1">
相关问题
最新问题