html元视口标记

Question

我构建了一个html登录页面，你可以看到它here 我以这种方式使用了元视口标记：

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

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

Answer 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/之类的内容，以帮助您使网站响应。

Answer 2

首先，请遵循jmadden的好建议，并将您的视口标记更改为

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

然后在style.css的第54行你有：

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

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

希望这有帮助