摘要：布局视口就是移动设备上用来装载我们的网页的那一块区域。最常见的宽度是。虽说是没有滚动条，但是端能友好显示的页面，在移动端上就显示的很怪异。
这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。
不管三七二十一，我们先新建一个页面：
这不是一个demo
在谷歌浏览器下，我们可以看到不同手机的适配情况：
可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？
其实这个980所表示的就是布局视口。
布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。
布局视口有980像素，可是我们的屏幕很小，按理说应该会有滚动条才是，可实际上并没有。这就需要归功于另一个视口：视觉视口。
视觉视口visual viewport：屏幕上显示的页面的一部分。听起来很玄乎，可是你认真看下面这张图，你就能明白视觉视口(visual viewport)和布局视口(layout viewport)的关系了：
此时，因为我们的视觉视口 = 布局视口，所以没有出现滚动条。虽说是没有滚动条，但是pc端能友好显示的页面，在移动端上就显示的很怪异。字体很小，很难看清。比如亲爱的百度：
如果想让字体大小可读，又该怎么办？在此之前，我们还需要了解另一个视口，理想视口。
理想视口ideal viewport：它提供了设备上理想网页的大小。这个值可以在不同设备的理想视口查到。常用的有：i5是320，i8是375，plus是414。
扯了那么多，那要如何适配呢？
相信一定会有一些前辈，他们苦口婆心地告诉你，你只要加这一行代码就可以了：
怀有好奇心的我们，勇敢地作出了尝试：
这不是一个demo
hello world
得到了如下的效果：
字体在三大尺寸下，显示都算是友好，但是奇怪的是div的宽度不再是980，而是和设备的宽度有关。这一切，都得归功于我们刚刚加的width=device-width了。
width=device-width，这句代码的意思就是把布局视口 = 理想视口。那既然布局视口跟着变了，那刚刚的视觉视口又算咋回事啊，它现在的值等于多少？这不还有我们刚刚设置的另一个代码initial-scale=1.0，它的作用就是改变视觉视口的。
initial-scale指的是缩放系数。其中有这样的公式：
视觉视口宽度 = 理想视口宽度 / 缩放系数
缩放系数 = 理想视口宽度 / 视觉视口宽度
拿i5的机型来说，根据公式可得：
视觉视口宽度 = 320 / 1 = 320
布局视口宽度 = 320
所以：视觉视口宽度 = 布局视口宽度。页面无滚动条。
那如果我改变initial-scale的值会有什么反应呢，同样我以i5的机型做示范：
initial-scale = 0.5 「 div宽度640，页面无滚动条 」
initial-scale = 1 「 div宽度320，页面无滚动条 」
initial-scale = 1 「 div宽度320，页面有滚动条 」
现在我们好好来捋捋：
initial-scale = 0.5 「 div宽度640，页面无滚动条 」 视觉视口宽度 = 320 / 0.5 = 640 布局视口宽度 = 320 又因为：视觉视口不能大于布局视口，所以此时，将布局视口的宽度提高等于640 总结：视觉视口 = 布局视口 = 640
initial-scale = 1 「 div宽度320，页面无滚动条 」 视觉视口宽度 = 320 / 1 = 320 布局视口宽度 = 320 总结：视觉视口 = 布局视口 = 320
initial-scale = 2 「 div宽度320，页面有滚动条 」 视觉视口宽度 = 320 / 2 = 160 布局视口宽度 = 320 总结：视觉视口 < 布局视口 页面出现了滚动条。
最后总结：
页面是否出现滚动条，看布局视口和视觉视口的大小
页面元素的宽度取决于布局视口的大小
留个思考题：为什么在未设置的情况下，页面无滚动条，浏览器做了哪些默认的设置？
参考：
ppk大神讲解视口第一篇
ppk大神讲解视口第二篇
ppk大神讲解视口第三篇
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52963.html
摘要：布局视口就是移动设备上用来装载我们的网页的那一块区域。最常见的宽度是。虽说是没有滚动条，但是端能友好显示的页面，在移动端上就显示的很怪异。 这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。 不管三七二十一，我们先新建一个页面： 这不是一个demo *{mar...
摘要：面对这些较高的要求，前端在开发环节中的作用也变得越来越重要因而近几年来前端工程师备受青睐一般水平的前端工程师平均年薪可达万元资深前端工程师年薪高达万元。这种用户体验的细节问题是否处理妥当是判断一名前端工程师是否优秀的因素。 本文是为了给那些想要了解前端开发是什么，或者刚刚打算开始学习前端的朋友们准备，希望可以帮助准备入行的你;showImg(https://segmentfault.c...
摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...
摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...
阅读 2053·2021-11-16 11:44
阅读 3048·2021-09-26 09:47
阅读 580·2021-09-10 11:16
阅读 2050·2019-08-30 15:54
阅读 752·2019-08-30 15:53
阅读 1733·2019-08-30 13:00
阅读 495·2019-08-29 17:07
阅读 3406·2019-08-29 16:39
