屏幕分辨率和浏览器页面显示宽度的关系

屏幕分辨率、缩放和浏览器页面宽度的关系

1. 问题描述

在写页面的过程中，明明我的笔记本的分辨率是2560*1600的，但是当我给一个页面的body设置一个1240px远小于2560px的宽度，为什么会出现水平滚动条？进入开发者模式发现自己的body宽度才不到1150px。您是否遇到过这样的问题？

下面是出现问题时bing.com页面的body宽度

下面是给body一个宽度，显示出了水平滚动条

---

效果展示:

为什么会出现这样的问题呢？其实是系统设置里的缩放和文本大小导致的。

2. 解决方法

1. 打开系统设置

2. 左侧点击辅助功能

3. 点击文本大小

4. 看看文本大小是否被调整过

如果被调整过，那么在浏览器中访问网页时，可能会出现布局偏移或部分内容被遮挡的情况，也就是宽度被缩小。

5. 如果被调整过，将其改为100

此时虽然字体的大小变小了，但是在写页面时会舒服很多，不然布局错误有可能会认为是自己代码的问题。

---

到这里你会发现你现在的页面宽度增加了。

自己测试的页面body变成了设置的1240px，不在出现滚动条，如果不设置width的话，会发现虽然变宽了，但是仍没到达屏幕应该有的分辨率2560px；

看效果图，会发现现在的宽度为1707px，此时写页面在笔记本上会比较舒服，因为一般pc端的页面的核心内容的宽度大部分在1440px往下。

6. 点击左侧系统

7. 点击屏幕

8. 将缩放改为100%

此时在打开页面会发现body 的宽度恢复正常

但是由于笔记本的本身的屏幕大部分在15.6寸左右，这样看内容会非常小，所以我更建议150%的缩放，虽然body宽度只有1700px左右，但是写页面已经足够。

3. 如何造成这样的？

通过此次的设置，会发现浏览器页面的宽度与分辨率、缩放、文本大小之间有这样的关系

电脑分辨率 = 浏览器页面宽度 * 缩放倍数 * 文本大小缩放倍数

如何造成这样的我猜测是浏览器自己这样设计的，但是所有浏览器Chrome，edge，火狐基本上都有这样的问题。

分辨率 = 浏览器页面宽度 * 缩放倍数 * 文本大小缩放倍数**

如何造成这样的我猜测是浏览器自己这样设计的，但是所有浏览器Chrome，edge，火狐基本上都有这样的问题。

此外，如果你的显示器一般在24寸-30寸的，应该不会出现这样的问题，因为这样的显示器足够大，缩放和文本缩放默认设置一般都为100%，这样的问题大概率会出现在笔记本上。