std::max 非法标记_快速提示：不要忘记视口元标记

最新推荐文章于 2025-03-31 11:22:24 发布

翻译最新推荐文章于 2025-03-31 11:22:24 发布 · 356 阅读

文章标签：

#python #人工智能 #html #css #web

本文探讨了响应式网页设计中视口元标签的重要性，解释了它如何帮助布局在不同设备上正确显示，包括如何使用@viewport规则进行优化。

std::max 非法标记

我记得我进行了响应式网页设计的处女航。我使用了经典的网格，灵活的布局，并首次处理了媒体查询。拉伸和缩小浏览器窗口可以使我的设计对周围的环境感到满意。然后，我在手机上对其进行了测试。它没有用-我正在查看缩小的全屏设计版本。事实证明，解决方案很简单。

注意：本教程于2012年2月首次发布，但在其他教程中它经常用作参考（并且情况有所变化），因此我认为需要进行更新。

症结

如果您在这篇文章中没有读到其他内容，请忽略一点建议： 如果您要灵活设计，请在<head>中使用viewport meta标签 。在基本形式下，您可以放心地跨设备布局：

<meta name="viewport" content="initial-scale=1">

问题

让我们使用我一起绘制的示例布局。看一看; 您会发现它随着浏览器大小的变化而缩小和增长。还有一个单一的媒体查询，该查询使文本变大，并在更大的屏幕上为标题提供明亮的#ff333e颜色。可爱。

这是在OSX Chrome中的外观：

这是压缩浏览器窗口时的样子：

现在，让我们看看它在智能手机上的外观（在本例中为iPhone 4上的iOS Safari）：

您会注意到的第一件事是红色标题；致命的礼物，我们没有考虑我们期望的狭窄布局。我们实际上正在查看的是缩小版本。

iOS Safari假定网页的宽度为980px，并缩小以适合整个可用范围（iPhone 4）320px。除非放大，否则内容的可读性将大大降低。

为什么？

就像他们说的那样，假设是一切之母……某件事，但是如果您没有明确指示，那正是移动浏览器所要做的。当您通过移动浏览器访问网站时，它将假定您正在查看大型桌面体验，并且想要查看所有体验，而不仅仅是左上角。因此，它将视口宽度设置为980px（在iOS Safari中为980px），将所有内容切入其小显示屏。

视口元标记

输入Apple引入的viewport元标记，然后由其他人采用和进一步开发。

看起来像这样：

<meta name="viewport" content="">

在content=""您可以输入大量以逗号分隔的值，但是现在我们将重点关注基本值。

例如，如果您的移动设计故意以320像素进行布局，则可以指定视口宽度：

<meta name="viewport" content="width=320">

对于灵活的布局，将视口宽度基于相关设备更为实用，以便使布局宽度与要输入的设备宽度相匹配：

<meta name="viewport" content="width=device-width">

为了更加确定您的布局将按预期显示，您还可以设置缩放级别。例如：

<meta name="viewport" content="initial-scale=1">

..将确保打开后，您的布局将以1：1比例正确显示。不应用缩放。您甚至可以走得更远，防止用户进行任何缩放：

<meta name="viewport" content="maximum-scale=1">

注意：在应用maximum-scale参数之前，请考虑您是否应该真正防止用户放大。他们是否可以阅读所有内容？

错误地使用视口元标记会阻碍用户访问您网站的视觉问题

- 无障碍项目

放在一起

这些值一起为我们提供了一个绝佳的默认值，可用于：

<meta name="viewport" content="width=device-width, initial-scale=1">

让我们看看它如何影响我们的示例

如您所见，一切都保持正确的规模。文字在环绕而不是缩小，并且我们的视觉助手（红色标题）消失了。

但！

致杰森（Jason）的提示，请在评论中指出。通过声明布局的宽度等于设备的宽度，在横向使用设备时会遇到问题。看一看iPhone 4如何横向处理我们的演示：

浏览器觉得有必要放大以匹配页面的宽度。

为了解决这个问题，正如Jason所指出的，我们可以使用JavaScript有条件地选择要使用的metatag属性，但是最简单的解决方案似乎只是完全忽略width 。通过仅设置initial-scale ，就可以推断出宽度。这就是我们的新简化演示在景观中的显示方式：

不是您要找的标准

视口元标记是Apple解决该问题的方法。它被其他平台Swift采用，但是W3C从未提出过。当他们选择让IE10在某些情况下忽略视口元标记时，Microsoft对此进行了说明。相反，他们选择使用CSS设备适配，这是什么W3C正在扶着。

简而言之，类似的视口属性是在CSS中使用@viewport规则定义的，而不是在HTML中定义的。

@viewport{
    zoom: 1.0;
    width: device-width;
}

或者，根据我们较新的不指定设备宽度的方法，我们可以设置以下内容：

@viewport{
	zoom: 1.0;
	width: extend-to-zoom;
}

鉴于这项工作仍在进行中，因此IE10需要该投标的前缀版本，如下所示：

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

与metatag相比，它是一种更为优雅的解决方案，但要获得完全支持还很遥远。现在将其放入CSS中，以确保您的响应式设计在IE10“快照模式”下表现良好，并密切关注其未来的发展。这是视口控制的方向。

您可以在Tim Kadlec的文章IE10捕捉模式和响应式设计中了解更多信息。

结论

响应式网页设计不仅适合那些喜欢观看其浏览器的增长和收缩的人们，它还涉及尽可能多的不同设备，屏幕和分辨率！当您构建灵活的布局并且一切顺利时，将viewport meta标签放入<head> ，再将@viewport规则放入CSS。

您还可以在ThemeForest上找到数千个高质量的响应主题和模板，并在CodeCanyon的“响应”类别中找到大量的脚本，插件和附加组件。

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

std::max 非法标记