手机移动端的一些布局,视口知识的分享

手机视口

        使用js来检测屏幕视口的宽度

               document.documentElement.clientWidth；

               使用手机执行这段代码，发现不管是什么手机，大屏小屏，宽度都是980px

               电脑：分辨率 = 视口宽度

               但是，手机的分辨率远远大于980，比如iPhone6p 分辨率是：1240 * 2208

               按道理说手机视口应该是1242才对

               980是viewport的宽度，viewport就是视口

               980是人为定的，这个是乔帮主（乔布斯）定的980这个数字

               总结：980是人为规定的宽度，叫做视口宽度，所有手机的默认视口宽度都是980px，如果使用手机浏览没有优化的电脑网页，将会非常方便

               但是：问题来了，如果我发布的页面专门用于手机访问，那么980太宽了，里边装的东西太多，我们希望使用手机屏幕真实宽度作为视口宽度

               现在我们可以通过约束视口，打到我们的要求

               <meta name='viewport' contant='width=