Question

google说“因为css像素比率”，但我无法弄清楚它是什么，或者为什么它存在。

为什么我要添加元数据告诉浏览器将屏幕呈现在屏幕分辨率的<2/3处？图像（据我所知）不调整大小，为什么其他一切？为什么这么常见？ wts正在进行？

Answer 1

您需要了解将某些代码添加到文件中的原因。你说你的代码中有<meta name="viewport" content="initial-scale=1">。 initial-scale的含义是，在页面加载时，页面将以100％缩放级别查看。这不是要将1个CSS像素填充到1个硬件像素。这是关于将1个CSS像素填充到1个与设备无关的像素。

As defined in Google's developer reference：
与设备无关的像素（倾角）：设备像素的缩放以匹配正常观看距离处的均匀参考像素，在所有设备上该大小应该大致相同。 iPhone 5的宽度为320 dips 硬件像素：显示屏上的物理像素。例如，iPhone 5的屏幕具有640个水平硬件像素。

手机上的硬件像素是否与PC显示器上的硬件像素不同？是的，它们在尺寸（像素密度）方面有所不同。假设您的21英寸显示器和5英寸手机屏幕都有1920px x 1080px屏幕，那么显然手机屏幕上的像素密度要高得多（而且像素要小得多），使用以下比例显示网页是不明智的。 1个CSS像素到1个硬件像素，因为手机屏幕上的所有内容都太小了。

那么，如果您不想要响应式网站设计，而是将整个页面放入小屏幕中，就像您在PC显示器上看到的那样，该怎么办？您需要做的就是删除 <meta name="viewport" content="width=device-width, initial-scale=1">行，默认情况下，浏览器会自动将页面调整到屏幕上，缩小（即初始比例不为1）。如果网站需要响应，开发人员只会添加这行代码，并且具有相关的CSS媒体查询。

Answer 2

虽然Billy的帖子确实回答了这个问题，并且它在描述一般机制方面做得很好，但问题确实提出了如何在默认情况下不会一直缩小的浏览器中将网页设置为全屏。也就是说，使用1920×1080屏幕上的每个像素，就好像它是1920×1080桌面显示器一样。

嗯，遗憾的是，没有任何故障保护方法可以做到这一点，但是如果你包含一些特定于设备的@media查询，你可以接近。

html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
@media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
@media (min-device-pixel-ratio:1.5)         { body {zoom:.66666667} }
@media (min-resolution:1.5dppx)             { body {zoom:.66666667} }
@media (-webkit-min-device-pixel-ratio:2)   { body {zoom:.5} }
@media (min-device-pixel-ratio:2)           { body {zoom:.5} }
@media (min-resolution:2dppx)               { body {zoom:.5} }
@media (-webkit-min-device-pixel-ratio:3)   { body {zoom:.33333333} }
@media (min-device-pixel-ratio:3)           { body {zoom:.33333333} }
@media (min-resolution:3dppx)               { body {zoom:.33333333} }
@media (-webkit-min-device-pixel-ratio:4)   { body {zoom:.25} }
@media (min-device-pixel-ratio:4)           { body {zoom:.25} }
@media (min-resolution:4dppx)               { body {zoom:.25} }

这将（尝试）缩放页面的比例，使CSS像素的数量与硬件像素的数量相同。
当然，如果您采用这种方法，请注意随着时间的推移，您将不得不添加具有更高分辨率的新媒体查询并且它将在非1920×1080像素的设备上失败。

更好的方法是根本不考虑硬件解决方案，而只是使用你拥有的东西。不要使用像素，使用百分比或vw和vh进行测量。 50vw，而不是960px，是屏幕的水平中心。这样，您的网页将在任何设备上正确显示，无论其特性如何。不需要滚动或挤压！
您可能会发现必须使用@media查询区分横向和纵向模式，但这取决于页面的内容。

为什么我的1080p屏幕以640px渲染网站？

2 个答案: