元视口和宽度=设备宽度与百分比尺寸答案

【问题标题】：Meta viewport and width=device-width vs. percent dimentions元视口和宽度=设备宽度与百分比尺寸
【发布时间】：2014-10-26 10:46:16
【问题描述】：

我试图确保在设置 width=device-width 时正确理解 Meta 视口标签的工作方式。

当在移动设备上工作时
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 像素单位的使用被（或应该）视为在 320 像素宽的网格上给出，这是否是正确的说法？即宽度为 160px 的元素会占据屏幕的 (160/320 = 50%)？

在桌面浏览器上运行时，此行为似乎不起作用，所以假设我想在移动设备和桌面设备上获得相同的设计，我应该/可以使用百分比还是 vw/vh 单位？

【问题讨论】：

如果 device-width 对于特定的设备+方向+浏览器组合计算为 320 CSS 像素，那么是的，宽度为 160 像素的元素将是屏幕宽度的一半。但其他组合会将device-width 评估为其他值。
好的。 - 我很困惑......所以如果设计师说他们设计了一个基于 1080 像素宽度的页面，并且设计中的某个按钮是 210 像素，我应该连续有 4 个这样的按钮（总共 840 像素，它们之间的剩余空间....) 并假设我确实有元标记 - 我应该给我的图像什么尺寸？
嗯，你真的需要一个新设计师......但如果你想要连续 4 张图像占据大约 80% 的可用宽度，你应该给每张图像 20% 的宽度（或20 伏）。有或没有元标记都是一样的。
我们一直在学习。我尊重我的设计师的工作，不欣赏评论的第一部分。假设您实际上写道，我的设计师应该对她的工作方式进行一些更改（即学习），我仍然很乐意了解这些更改是什么。我相信她会很乐意改进。
很公平。她需要停止思考基于固定尺寸像素的布局和设计，因为她知道大量输出设备将用于具有非常不同的属性。

标签： css mobile viewport viewport-units

【解决方案1】：

首先要意识到 CSS 像素和设备像素不是一回事。在 CSS 中设置 width: 160px 时的像素数与 CSS 像素有关，与设备的实际像素关系不大。

移动浏览器（在相当现代的智能手机上）会创建一个“假”视口，它模拟桌面宽度的浏览器大小，它也会被缩小以适应屏幕。这个假视口的尺寸通常在 800-1000 CSS 像素宽左右（例如，iPhone 使用 980 像素）。这是为了确保未优化的网站在手机上仍能正常显示，因为您可以放大特定部分等。

当您使用带有 width=device-width 的元视口标签时，您是在告诉设备您的网站适合在任何视口大小上查看，并且您不想要“假桌面" 测量。

相反，浏览器应将适合屏幕的 CSS 像素数设置为该设备的“理想”像素数。在旧 iPhone 上，这实际上是 320 像素。在配备 Retina 屏幕的 iOS 设备上，CSS-pixel-to-device-pixel ratio 不同，因此屏幕为 640px 宽，但理想的 CSS 像素数仍然只有 320。在其他智能手机上，测量结果有所不同——在智能手机上通常是 300 - 500 像素。

如果您希望您的布局适应 CSS 像素的数量，您最好不要使用特定的像素测量值并使用百分比。无论您必须使用多少 CSS 像素，50% 的视口始终是 50% 的视口。

【讨论】：

所以基本上我把它颠倒了？声明width=device-width 意味着如果它认为适合css像素数，它可以选择任何值？当我在那里选择一个实际值时会发生什么？例如宽度=320？或宽度= 1080？当屏幕实际有 640 时，为什么 iOS 320 的理想像素数是？是为了确保css像素“足够大”吗？当您确实想要获得不同的值时应该使用 width=device-width 以便能够根据这些值调整布局，这样说是否正确？
是的，你在正确的轨道上：设置width=device-width 意味着设备可以选择视口的像素大小，例如用于响应式布局。如果您在此处设置width=320（或任何其他值），则意味着任何设备都将使用 320 (CSS) 像素的宽度作为视口的宽度。这通常不是一个很好的选择，因为有如此多的设备具有如此多的不同视口。例如，您的布局将在平板电脑上放大。
iOS 设备一开始是 320 像素宽（纵向），因此人们开始为此进行设计。当视网膜屏幕出现时，它们的像素是原来的 4 倍（2 倍宽，2 倍高），因此为 320 设计的“移动”网站看起来很小。因此，他们模拟了“2x”缩放，因此 1 CSS 像素 = 2x2 设备像素。如今，为此有大量不同的值，因此每个设备的理想像素数可能会有所不同，但就可用于布局的 CSS 像素而言，它们中的大多数都保持在 320-400 左右的范围内。
哦，最后一件事。 initial-scale 事物还设置视口宽度，基于缩放因子 1 等于 device-width。如果您将 initial-scale=1 声明与 width=device-width 声明一起使用（您应该这样做 - 它可以防止一些不一致的行为），大多数移动浏览器会选择两者中较大的一个。我强烈建议您查看 Peter-Paul Kock 对此的著作主题：youtube.com/watch?v=8J6EdpXdzqc
不是视频，但响应式模式的一个很好的起点是 Brad Frost 的“这是响应式的”-bradfrost.github.io/this-is-responsive

【解决方案2】：

通常情况下，绝对不需要这些有害声明：

maximum-scale=1, user-scalable=no

我的眼睛不是很好，所以我经常发现网页上使用的字体太小了，不舒服。如果网站阻止我缩放以阅读它，还有什么更烦人的呢？

如果您仍然不这么认为 - 请仔细阅读这篇文章：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

引用自那里（强调我的）：

声明最大比例

设置最大比例意味着设置最大缩放。在访问信息是重中之重的网站（大多数，如果不是全部，网站）上，设置maximum-scale=1 将不允许用户缩放。如果您有一个响应式网站，这似乎并不重要，但是有很多情况下用户可能需要缩放：小正文字体（至少，对于用户的需要），检查一些细节照片等。不要仅仅出于审美原因触发可访问性问题。

用户可扩展=否

这个参数去掉了放大或缩小的能力，比maximum-scale更糟糕。如果有一个非常特殊的原因使用它（例如，您正在编写一个 Web 应用程序并且需要避免放大表单输入），请尝试使用 JavaScript 添加和删除它，只是为了您想要修复的操作。无论如何，请记住，智能手机用户习惯于放大和缩小任何网站，因此填写表单后必须缩小可能是默认行为，您可能不必修复它。

组合断路器

现在想象一下组合破坏器：一个非响应式网站（固定布局，大约 960 像素宽度），带有类似的视口标签

<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">

恭喜，您的网站已放大到左上角的前 300 像素或 400 像素，用户无法缩小，访问信息的唯一方法是耐心查看 300 像素宽度的网站。一个额外的标签搞砸了整个体验。

【讨论】：