Question

我正在尝试创建一个包含正文和div的移动登录页面，其中包含用于输入用户名密码的文本框。使用Chrome模拟器时，我注意到模拟器自动缩放到0.4（显然看起来不太好）当我扩展到1.0时，我的页面似乎超出了视口。这是我的身体css：

    html, body {font-family: Arial, sans-serif;background: #fff;margin: 0;padding: 0;border: 0;position: absolute;height: 100%; width: 100% !important;max-width:100% !important;font-size: 13px;color: #404040;direction: ltr;}

否则所有子元素都比请求的视口窄。

我对移动设计很陌生，我觉得我缺少某种设置/ css，这会导致页面正确缩放。

Answer 1

添加视口元标记就行了！

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

移动页面宽度大于导致Chrome模拟器缩小的范围

1 个答案: