电脑版网页在手机中 100% 变 980px 的解决(也可能 964px)

作者:vkvi 来源:千一网络(原创) 日期:2018-9-7

100% 的 div,在手机版中显示并没有显示全,有一处空白,具体跟踪后,发现只有 980px 的宽度,为什么手机版屏幕明明不止 980px,却只显示 980px呢?原来它给 body 定义的 100% 就是 980px。注意:也可能是 964px,这是因为我们还有 2*8px 的 margin 没算,算上后,就是 980px

解决办法:

法一、网上说通过 viewport 设置 width=device-width。

这是将电脑版变成手机版的操作,我不认可。因为我觉得这样不好看,浏览器的宽度变成 400 左右,内容都放大了。这个只适用于定制的手机版,电脑版在手机中这样显示还是不太好。

法二、给 body 设置 min-width:要的宽度。

为避免在电脑浏览器中出问题,最好设置 min-width,而不是 width。

法三、【推荐】为手机做自适应

@media (max-width:980px) {
    .wrapper { width:1200px; }
}
相关文章