HTML元标记视口标签

Question

我制作了一个html落地页，你可以在这里看到它。 我使用了meta viewport标签：

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

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

- Tal Levi

---

请查看此页面：https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag。还有其他的“viewport”内容设置，例如“maximum-scale”，“minimum-scale”，“initial-scale”和“user-scalable”可能需要进行设置。 - War10ck

一个问题应该包含足够的代码来重现问题，并清楚地说明问题所在。一个指向实时页面的链接（例如通过在线服务）是不够的；一旦页面被修复或修改，它就变得无用了。而且 meta 标签并不能神奇地使任何东西适合。它更多地告诉浏览器，您已经设计好了页面，无需重新缩放即可适应。 - Jukka K. Korpela

Answer 1

根据War10ck的建议，考虑将您的viewport meta标签更改为以下内容：

<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/这样的工具来帮助你制作响应式网站。

- Jim M.

---

我认为这并没有回答楼主的问题。他/她正在尝试将其格式化以适用于移动设备... - War10ck

@jmadden 谢谢，我尝试了两个选项，但仍然不起作用，有什么建议吗？ - Tal Levi

Answer 2

首先，按照jmadden的好建议更改您的视口标签，例如：

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

然后，在style.css的第54行你会见到：

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

你需要移除那个930像素的宽度或者使用媒体查询来覆盖它，因为在窄视口下它会阻止你的页面布局崩溃。

希望这能有所帮助。

- David Taiaroa

---

我遇到了同样的问题。我应该将其更改为另一个固定宽度，还是在我有 ~1200px 宽度的地方必须使用百分比？ - Csteele5

@Csteele5 - 是的，在元素上设置固定宽度通常会给移动设计带来麻烦，解决方案部分取决于您设计的具体情况。也许您可以像您提到的那样使用百分比，或者当视口足够宽以显示它时设置固定宽度，然后使用媒体查询在较窄的视口上设置元素的不同属性。如果您需要帮助开始使用媒体查询，请参见http://www.w3schools.com/css/css_rwd_mediaqueries.asp。祝你好运！ - David Taiaroa