关于屏幕宽高问题

同学你好，解答如下：

1、在不做适配的情况下，移动端body的宽度不是屏幕的宽度：

为了让body的宽度与屏幕宽一样，所以我们需要做适配（严格来讲，是让html的宽度与屏幕宽一致）。

body的高度由内容撑开，内容多，高度就大、反之则小，与屏幕高度无关。

2、适配只要让页面宽与屏幕宽相等即可，所以只需要适配宽度。如果不适配宽度，由于html的宽度大于屏幕宽，所以需要横向滚动页面，才能看到水平方向的全部内容。横向滚动页面这个操作并不友好，体验不好。所以我们就让body与屏幕宽一样，这样页面不需要横向滚动就能看到水平方向上的全部内容，体验更好。

而页面的高度（html的高度）则不需要限制，因为我们可以通过上下滚动页面，来查看竖直方向的全部内容，上下滚动页面这个操作是正常的，可以不调整。

3、屏幕宽高是设备自身的性质，我们修改不了。

视口宽与html宽相等：

a）未适配时，视口宽度（该视口称为布局视口）是定值（高度没限制），它是手机厂商设置的一个值，比如iphone6下，视口就是980的（图二）：

默认情况下，页面会在这个宽度下显示，简单了解一下即可。此时，html的宽度与布局视口宽度一致（请看图二），与设备宽无关。

如果不设置body的宽度，body会占满html：

b) 适配后，html的宽度与布局视口还是相等，与设备宽有关。比如如下设置，html宽、布局视口、设备宽是一样的：

而body默认占满html：

html、body的高度，都由内容撑开，与屏幕高无关。

祝学习愉快！