开发过程中，可能会遇到这种情况：电脑屏幕是13寸，14寸的，但是在浏览器中显示宽度没有达到自己屏幕的宽度，导致样式把控上很不方便。

这种问题多发现于笔记本电脑上，并不是说台式机上没有这个问题，而是台式外接的屏幕就当今而言不会特别小，所以不容易发现而已。

原因：高分辨率导致

在这么多年的电脑使用中，不知道你有没有发现，电脑屏幕的分辨率越低，字体与图标越大；而分辨率越高，字体和图标越小：

低分辨率

微信截图_20180124222919.png

高分辨率

微信截图_20180124223209.png

现实情况下，主流的电脑品牌拿出2K屏，乃至4K屏作为销售卖点，所以会出现小屏幕配高分辨率的情况。那这样是不是笔记本用了高分辨率，本来屏幕就不大的情况下，字太小会导致看不清楚呢？
答案是否定的，你仔细看你的笔记本，其实并不会有字太小看不清楚的情况。因为现在的系统会根据配置默认把字体放大，以至你看起来并不会觉得有什么问题，以window10为例：

image.png

上图那个推荐选项就是系统默认的选项，也正是这个原因导致浏览器渲染宽度变小。(你可以尝试改变选项来看看效果)

总结

现在的操作系统会根据电脑的屏幕大小和分辨率大小来调整文本及应用的大小，以便适配小屏幕上使用高分辨率显示不清的问题。这也是导致浏览器渲染的时候，渲染的窗体宽度小于实际电脑屏幕的宽度。

所以我们在确定兼容最小宽度的时候，考虑到系统会往下缩放，最好坚持版心1200px的底线。以确保大多数笔记本的显示情况是符合我们期望的那样。

前端技术交流群：709397872（欢迎加入）