移动页面宽度大于导致Chrome模拟器缩放较小



我正在尝试创建一个由用户名密码文本框内的body和div组成的移动登录页面。当使用Chrome模拟器时,我注意到模拟器自动缩放到0.4(这显然看起来不太好)当我扩展到1.0时,我的页面似乎超出了视窗。这是我的body 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;}

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

我对移动设计很陌生,我觉得我缺少一些可以使页面正确缩放的设置/css。

添加viewport meta标签就成功了!

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

相关内容

最新更新