google 说“因为 css 像素比”，但我不知道那是什么，也不知道它为什么存在。
为什么我要添加元数据告诉浏览器以 <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 个水平硬件像素。
您手机上的硬件像素与 PC 显示器上的硬件像素是否不同？是的，它们在尺寸(像素密度)方面有所不同。假设您的 21"显示器和 5"手机屏幕都是 1920px x 1080px 屏幕，那么显然手机屏幕上的像素密度要高得多(并且像素要小得多)并且使用以下比例显示网页是不明智的1 个 CSS 像素比 1 个硬件像素，因为手机屏幕上的一切都太小了。
那么，如果您不想要响应式网站设计，而是想要像您在 PC 显示器上看到的那样将整个页面放入小屏幕怎么办？您需要做的就是删除 <meta name="viewport" content="width=device-width, initial-scale=1">默认情况下，浏览器会通过缩小自动使页面适合屏幕(即初始比例不会为 1)。开发人员仅在网站需要响应时才添加这行代码，并且具有相关的 CSS 媒体查询。
关于css - 为什么我的 1080p 屏幕以 640px 呈现网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31087187/