Css 为什么我的1080p屏幕以640px的速度呈现网站？

谷歌说“因为css像素比率”，但我不知道这是什么，或者它为什么存在

---

为什么我要添加告诉浏览器在处呈现屏幕的元数据？您需要了解为什么要将某些代码添加到文件中。你说你的代码里有

。

初始缩放

的意思是，页面加载后，页面将以100%缩放级别查看。这并不是将一个CSS像素填充到一个硬件像素。它是关于填充1个CSS像素到1个设备独立像素

：
设备独立像素（dip）：设备像素的缩放，以匹配正常视距下的统一参考像素，所有设备上的参考像素大小应大致相同。iPhone 5的宽度为320度。
硬件像素：显示器上的物理像素。例如，iPhone5的屏幕具有640个水平硬件像素

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

---

因此，如果您不想进行响应式网站设计，而是想让整个页面像您在PC显示器上看到的那样显示在小屏幕上，该怎么办？您需要做的就是删除

行，默认情况下，浏览器会通过缩小（即初始比例不会为1）自动将页面显示在屏幕上. 开发者只有在网站需要响应时才添加这行代码，并且有相关的CSS媒体查询。

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

不幸的是，没有故障保护方法可以做到这一点，但是如果您包含一些特定于设备的@media查询，您可以接近它

html，正文{边距：0；宽度：1920px；高度：1080px；字体大小：16px；}
@媒体（-webkit最小设备像素比：1.5）{body{zoom:.66666 7}
@媒体（最小设备像素比：1.5）{body{zoom:.66666 7}
@媒体（最小分辨率：1.5dppx）{body{zoom:.66666 7}
@媒体（-webkit最小设备像素比：2）{body{zoom:.5}
@媒体（最小设备像素比：2）{body{zoom:.5}
@媒体（最小分辨率：2dppx）{body{zoom:.5}
@媒体（-webkit最小设备像素比率：3）{body{zoom:.33333333}
@媒体（最小设备像素比：3）{body{zoom:.33333}
@媒体（最小分辨率：3dppx）{body{zoom:.33333}
@媒体（-webkit最小设备像素比率：4）{body{zoom:.25}
@媒体（最小设备像素比：4）{body{zoom:.25}
@媒体（最小分辨率：4dppx）{body{zoom:.25}

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

一个更好的方法是根本不考虑硬件分辨率，而只是使用现有的硬件。不要使用像素，使用百分比或vw和vh进行测量。50vw，而不是960像素，是屏幕的水平中心。这样，您的网页将在任何设备上正确显示，无论其特性如何。无需滚动或挤压

---

您可能会发现您必须使用@media querys区分横向和纵向模式，但这取决于页面内容。

您能否发布一些代码，以便我们可以更仔细地了解您的问题？@Vinc199789这不是编码问题，这是移动设备的工作方式，我试图理解原因。我能提供的唯一代码是，线条使每个像素的大小相同，以保持其短。看看这里：@Vinc199789它不等于1-1，它等于1-0.6，为什么这是常见的做法？如果我从mozilla网站上复制代码，你会遗漏一些东西。你有

，mozilla有

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