移动端页面宽度问题

html,body {
    width: 100%;
    height: 100%;
    font-family: Arial,"Microsoft YaHei";
    text-align: center;
    overflow: hidden;
    background-color: #ffffff;
}

.body {
    width: 100%;
}

这种样式的话,无论宽度怎么调整,都会有一个左右滑动的效果,就是页面总是比屏幕宽。

.body {
    width: 100%;
    height: 100%;
    font-family: Arial,"Microsoft YaHei";
    text-align: center;
    overflow: hidden;
    background-color: #ffffff;
}

去掉html,body 样式,写在.body里面后,就没有这种情况了。

这俩种有什么区别吗?

H5页面body这样写的:

<body>
    <div class="body">xxxxx</div>
</body>
阅读 5.5k
1 个回答

一般不会给body直接添加宽高属性的,而是在头部添加下面代码,让页面自动适应设备屏幕宽度。

<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题