我正在尝试创建一个由用户名密码文本框内的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">