css ul宽度把右侧屏幕滚动条覆盖了_网站想支持手机，少了这一行，用啥CSS框架都没用...

最近小编在搭博客，当然要在公众号上用原文链接好宣传一下。结果点过去，字体小的什么都看不见。象这个样子

刚开始以为某信自定义的网页新标准搞的。结果发现网页浏览器也是这个鬼样子。明明小编已经用了最新的Bootstrap4了，传说的响应式CSS框架鼻祖啊。So搜了下，大神说要加这一行

<meta name="viewport" content="width=device-width, initial-scale=1"> 

试了下，奇迹发生了。

字体清晰可见。做一个合适的技术人当然不能“知其然而不知其所以然”，这是为什么？同样的像素，同样的CSS代码，一行meta就可以搞定缩放到合适的尺寸？

首先我们看看viewport, 它是网页内容的真正大小，而浏览器大小不够时，就需要显示滚动条。形象一点的话，就象星际或者魔兽里的小地图。很多移动端的浏览器会针对没有做移动端优化的网站建一个虚拟的Viewport渲染html, 然后缩小显示出来。这就导致图一的字体非常小。

然后本身Bootstrap4是针对移动端做了优化的，只不过针对的屏幕更小，浏览器当前的宽度大于Css @media设计的宽度时就没有引用，所以被浏览器强行缩小显示了。

而device-width 就是当前设备的物理宽度，我们把宽度设为设备宽度，再用initial-scale=1 设置初始缩放为100%。浏览器就没用创建虚拟Viewport，直接按代码设定的渲染页面。右边的那栏就被“响应式”的置于下方，而图片和字体的大小保持不变。

由此可见了解底层的重要性，用再多的代码和第三方框架也解决不了的复杂问题往往是底层早已支持的基础功能