html 元视口标签答案

【问题标题】：html meta viewport taghtml 元视口标签
【发布时间】：2014-07-02 23:29:35
【问题描述】：

我建了一个html登陆页面，可以看here 我以这种方式使用了元视口标签：

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

当我从手机进入这个页面时，页面宽度不适合屏幕， Iphone 示例 - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/ 我做错了什么？

【问题讨论】：

Check this page。可能需要设置额外的viewport 内容设置，例如maximum-scale、minimum-scale、initial-scale 和user-scalable。
一个问题应该包含足够的代码来重现问题并清楚地说明问题是什么。指向实时页面的链接（这里通过在线服务）是不够的；一旦页面被修复或以其他方式修改，它就会变得无用。 meta 标签并不能神奇地使任何东西都适合。它或多或少会告诉浏览器您已经设计了适合页面的内容，而无需重新缩放。

【解决方案1】：

根据 War10ck 的建议，考虑将您的视口元标记更改为以下内容：

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

您还可以在 CSS 中进行更改以帮助您。考虑更改 .content 类。例如：

.content{
  width: 100%;
  max-width: 930px;
}

我不确定您的最终设计目标是什么，但这应该会让您朝着正确的方向前进。您还可以研究 Bootstrap http://getbootstrap.com/ 之类的东西，以帮助您使网站具有响应性。

【讨论】：

【解决方案2】：

首先，遵循jmadden 的建议，将视口标签更改为类似

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

那么在 style.css 的第 54 行你有：

.content {
    width: 930px;
    margin: 35px auto;
}

您需要删除 930 像素宽度或使用媒体查询覆盖它，因为在狭窄的视口中它会阻止您的页面布局折叠。

希望对你有帮助

【讨论】：

我遇到了同样的问题。我应该将其更改为另一个固定宽度，还是必须在我的宽度为 ~1200px 等时使用百分比？
@Csteele5 - 是的，在元素上设置固定宽度通常会给您的移动设计带来麻烦，解决方案将部分取决于您的设计细节。也许您可以使用您提到的百分比，或者您可以在视口足够宽以显示它时设置固定宽度，然后使用媒体查询在较窄视口的元素上设置不同的属性。如果您需要帮助以开始使用媒体查询，请参阅 w3schools.com/css/css_rwd_mediaqueries.asp。祝你好运！