为什么我的 1080p 屏幕以 640px 呈现网站？
Why does my 1080p screen render websites at 640px?
google 说 "because css pixel ratio" 但我不知道那是什么，也不知道它为什么存在。
为什么我要添加元数据告诉浏览器以 <2/3 屏幕分辨率呈现屏幕？图片（据我所知）不会 调整大小，那么为什么其他所有东西都一样？为什么这如此普遍？？ wts正在进行中??
您需要了解为什么要将某些代码添加到您的文件中。你说你的代码中有 <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 个水平硬件像素。
phone 上的硬件像素与 PC 显示器上的不同吗？是的，它们在尺寸（像素密度）方面有所不同。假设您的 21" 显示器和 5" phone 屏幕都有 1920px x 1080px 屏幕，那么显然 phone 屏幕上的像素密度要高得多（并且像素要小得多）并且不会明智的做法是使用 1 CSS 像素与 1 个硬件像素的比例来显示网页，因为在 phone 屏幕上一切都太小了。
那么，如果您不想要响应式网站设计，而是想要像您在 PC 显示器上看到的那样将整个页面放入小屏幕怎么办？ 您只需要要做的是 删除 <meta name="viewport" content="width=device-width, initial-scale=1"> 行，默认情况下，浏览器将通过缩小自动使页面适合屏幕（即初始比例不会为 1）。开发人员仅在网站需要响应时才添加这行代码，并且具有相关的 CSS 媒体查询。
虽然 Billy 的 post 确实回答了这个问题，并且很好地描述了一般机制，但问题确实出现了如何在不缩小的浏览器中将网页设置为全屏默认方式。即，将 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 查询来区分横向和纵向模式，但这取决于页面的内容。
google 说 "because css pixel ratio" 但我不知道那是什么，也不知道它为什么存在。
为什么我要添加元数据告诉浏览器以 <2/3 屏幕分辨率呈现屏幕？图片（据我所知）不会 调整大小，那么为什么其他所有东西都一样？为什么这如此普遍？？ wts正在进行中??
您需要了解为什么要将某些代码添加到您的文件中。你说你的代码中有 <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 个水平硬件像素。
phone 上的硬件像素与 PC 显示器上的不同吗？是的，它们在尺寸（像素密度）方面有所不同。假设您的 21" 显示器和 5" phone 屏幕都有 1920px x 1080px 屏幕，那么显然 phone 屏幕上的像素密度要高得多（并且像素要小得多）并且不会明智的做法是使用 1 CSS 像素与 1 个硬件像素的比例来显示网页，因为在 phone 屏幕上一切都太小了。
那么，如果您不想要响应式网站设计，而是想要像您在 PC 显示器上看到的那样将整个页面放入小屏幕怎么办？ 您只需要要做的是 删除 <meta name="viewport" content="width=device-width, initial-scale=1"> 行，默认情况下，浏览器将通过缩小自动使页面适合屏幕（即初始比例不会为 1）。开发人员仅在网站需要响应时才添加这行代码，并且具有相关的 CSS 媒体查询。
虽然 Billy 的 post 确实回答了这个问题，并且很好地描述了一般机制，但问题确实出现了如何在不缩小的浏览器中将网页设置为全屏默认方式。即，将 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 查询来区分横向和纵向模式，但这取决于页面的内容。