css - 我的设备分辨率为 720 像素，但浏览器宽度为 360 像素

Question

我的移动设备是 HTC One X，分辨率：720x1280

我需要做响应式网页

在 html 我写<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

但在浏览器中我有 360px 宽度。我已经使用$(window).width()或 document.width

Answer 1

它以 360 像素宽渲染，但深度为 720 像素。换句话说，它使用 4 个像素来显示 1 个普通像素。因此，所有正常图形都会显得模糊，因为它将图像放大两倍。所以解决方案是创建两倍大的图像，并将它们缩小 50%。

Answer 2

据我所知，声明观点时的语法应该是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  

请注意，它使用逗号而不是分号，并且在结束 /> 之前没有任何内容。

根据我的阅读，使用分号可能会导致某些浏览器出现问题。

祝你好运！

Answer 3

那可能是您的压缩分辨率，而不是您的缩放分辨率。

如果您查看智能手机的规格，您会发现 4.7 英寸的屏幕具有 1280 像素 x 720 像素的分辨率。见规格。这与我的 13 英寸 Macbook 的分辨率大致相同，这是不可能的，因为我的 Macbook 的宽度是其两倍多。因此，他们正在推销压缩分辨率，这不是浏览器在处理媒体查询时考虑的分辨率。