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; } }