为什么我的 1080p 屏幕以 640px 呈现网站？答案

【问题标题】：Why does my 1080p screen render websites at 640px?为什么我的 1080p 屏幕以 640px 呈现网站？
【发布时间】：2015-09-14 05:37:42
【问题描述】：

google 说“因为 css 像素比”，但我不知道那是什么，或者它为什么存在。

为什么我要添加元数据来告诉浏览器以不会调整大小，那为什么其他的都是？为什么这很常见？ wts是怎么回事？？

【问题讨论】：

您能否发布一些代码，以便我们仔细查看您的问题？
@Vinc199789 这不是编码问题，这就是移动设备的工作方式，我试图了解原因。我能提供的唯一代码是
那条线使每个像素的大小相同以保持简短。看这里：developer.mozilla.org/en-US/docs/Mozilla/Mobile/…
@Vinc199789 不是 1-1，而是 1-0.6，为什么这是常见的做法？
如果我将 mozilla 站点中的代码进行比较，您就错过了一些东西。你有<meta name="viewport" content="initial-scale=1"> 而Mozilla 有<meta name="viewport" content="width=device-width, initial-scale=1">

标签： css mobile web mobile-website pixel-ratio

【解决方案1】：

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

As defined in Google's developer reference:
与设备无关的像素 (dip): 缩放设备像素以匹配正常观看距离处的统一参考像素，其大小应与所有设备。 iPhone 5 的宽度为 320。
硬件像素：显示屏上的物理像素。例如，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 媒体查询。

【讨论】：

谢谢！我没有意识到有一个标准的观看尺寸正在努力实现。
没有任何元命令，大多数移动浏览器不会完全缩小以显示整个宽页面。用户必须自己动手。
@MrLister：感谢您提供的信息。根据我的经验，如果网页的宽度约为 1000 像素或更小（几年前在响应式设计成为主流之前很常见），所有移动浏览器都会缩小以适应屏幕的整个宽度，我认为是这样。您知道在什么情况下这不起作用，以及在发生这种情况时还有什么其他方法可以强制调整？
是的，OP 似乎有一个 1920 像素宽的页面，而这样的页面在大多数移动浏览器中都不会全宽显示。
@MrLister : 嗯...我没有看到任何地方表明页面是 1920 像素宽。无论如何，假设它是 1920px 宽，那么有没有办法让它在移动设备的屏幕上缩放？

【解决方案2】：

虽然比利的帖子确实回答了这个问题，并且很好地描述了一般机制，但问题确实提出了如何在默认情况下不会一直缩小的浏览器中将网页设置为全屏。也就是说，使用 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 查询来区分横向和纵向模式，但这取决于页面的内容。

【讨论】：