3

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

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

如果屏幕宽度等于360px，设备比例为2

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

固定宽度图像

此外，如果我放置一个 720 像素的图像，它不会覆盖整个设备宽度？？？

请注意，这是在我的真实设备上使用的 moto g4 播放器，屏幕分辨率为 720x1280 在此处输入图像描述

编辑

当我运行此代码时，如果图像在我的情况下为 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>

4

1 回答 1

4

尺寸是按比例缩放或伪造的，因为移动浏览器模拟桌面浏览器以与非移动页面兼容。

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

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

 <meta name="viewport" content="width=device-width,initial-scale=1">
于 2018-02-24T03:14:16.760 回答