win系统调整显示器缩放比与浏览器缩放比对web PC端项目的影响

win用户为什么会手动调整显示器缩放比或者浏览器缩放比

因为在屏幕物理尺寸没怎么改变的情况下，我们的像素密度越来越高。如果不调整缩放比（通常是放大），那么我们会觉得字体或图标偏小

猜测浏览器缩放实现原理

猜测原理： 使浏览器视口减小，从而使整体看起来，进行了放大

100%表示不缩放，125%表示放大，90%表示缩小。因为通常是因为100%比例下看不清楚，为了看清楚，win用户会选择，调大缩放比，使界面放大，因此我们以调整到125%为例，进行说明。

浏览器视口宽度查看方式

javascript 复制代码

document.documentElement.offsetWidth

显示器dpr查看方式

javascript 复制代码

window.devicePixelRatio

我的笔记本分辨率为：1920 * 1080, 在win显示器默认缩放比为100%，浏览器缩放比也是100%的情况下。浏览器充满屏幕，浏览器视口的实际宽度为1912(drp为1), 当我将浏览器缩放比调到125%时，浏览器视口的实际宽度为1530（dpr为1.25），在这个过程中(浏览器缩放比从100%放大到125%)，个人的观感是文字和图标都在变大

将浏览器缩放比调整回100%，这次改为调整显示器的缩放比，将显示器缩放比调整到125%时，浏览器的视口宽度变成了1528(dpr: 1.25), 为什么与浏览器的1530不一致，个人猜测是因为浏览器即使充满屏幕，浏览器视口的左右两边也没有完全贴合屏幕的左右两边导致。

win用户调整浏览器缩放比或调整显示器缩放比对web PC端项目有什么影响？

会影响界面的布局，可能导致布局错乱。

依然以1920px视口宽度为例（dpr：1），在显示器缩放比和浏览器缩放比都是100%的情况下，如果是191.2px宽度的元素，可以横着放10个

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
html,body{
    margin:0;
    padding:0;
}
.size{
    width: 191.2px;
    height: 200px;
    background-color: red;
    border: 10px solid green;
    box-sizing: border-box;
    float:left;
}
.flex{
    /* display: flex;
    flex-direction: row; */
}
    </style>
</head>
<body>
    <div class="flex">
        <div class="size">1</div>
        <div class="size">2</div>
        <div class="size">3</div>
        <div class="size">4</div>
        <div class="size">5</div>
        <div class="size">6</div>
        <div class="size">7</div>
        <div class="size">8</div>
        <div class="size">9</div>
        <div class="size">10</div>
    </div>
</body>
</html>