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/ 我是什么做错了吗？

Answer 1

根据War10ck的建议，请考虑将您的视口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/的内容，以帮助您使网站具有响应能力。