-1

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

为什么我要添加元数据来告诉浏览器以 <2/3 的屏幕分辨率呈现屏幕？图像（据我所知）没有调整大小，那为什么其他的都是？为什么这很常见？wts 怎么了？？

4

2 回答 2

3

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

正如 Google 开发人员参考中所定义的那样：
与设备无关的像素 (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 媒体查询。

于 2015-06-28T03:03:56.570 回答
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 查询来区分横向和纵向模式，但这取决于页面的内容。

于 2015-06-28T11:55:28.243 回答