分辨率 缩放比
win系统调整显示器缩放比与浏览器缩放比对web PC端项目的影响
https://juejin.cn/post/7325647896048730153?searchId=202407212053040F1493DC6D415F8F770B
win用户为什么会手动调整显示器缩放比或者浏览器缩放比
因为在屏幕物理尺寸没怎么改变的情况下，我们的像素密度越来越高。如果不调整缩放比（通常是放大），那么我们会觉得字体或图标偏小
猜测浏览器缩放实现原理
猜测原理： 使浏览器视口减小，从而使整体看起来，进行了放大
100%表示不缩放，125%表示放大，90%表示缩小。因为通常是因为100%比例下看不清楚，为了看清楚，win用户会选择，调大缩放比，使界面放大，因此我们以调整到125%为例，进行说明。
浏览器视口宽度查看方式
document.documentElement.offsetWidth
显示器dpr查看方式
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个
<!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>
但当你调整浏览器缩放比为125%时，布局就乱了
从猜测浏览器缩放实现原理我们可以知道，增大浏览器缩放比，实际会减小浏览器视口宽度，100%缩放比下，浏览器视口宽度为1912, 125%缩放比下，浏览器视口宽度为1530,我们每个方块的大小都是固定的，视口宽度变小，自然无法再容纳那么多个方块。
这种问题如何解决？
对于可能会影响页面整体布局的元素的宽度，不采用固定值
比如前面那个例子，如果将方块的宽度设置为width: calc(100vw / 10), 能实现同样的效果，且不会被缩放比调整而影响
但有时候我们确实还是需要设置固定的宽度，这个方式对于这种情况就无解了
js监听浏览器视口变化，随着视口变化而进行修正
总言之就是监测到浏览器缩放比变了，那就通过css的zoom，再修正过来。但firefox不支持zoom，且通过zoom缩放之后，还可能有其他的兼容问题。
禁止web页面缩放解决方案 - 掘金 (juejin.cn)
页面缩放之zoom和transform:scale的比较 - 掘金 (juejin.cn)
css媒体查询方式适配
既然是浏览器视口分辨率变化导致的布局错乱，那可以通过css媒体查询方式，适配呀。
如果是老旧项目，且实际工作量不大，确实可以考虑此方案。
采用移动端的适配方案
没错，既然都是要适配不同的分辨率屏幕，那移动端那套rem，vw，vh适配方案，当然也是可以的。但这只适用于新项目，老旧项目就无法采用此方案
限制body的最小宽度
这个简单也省事，但就是高分辨率大屏，可能就显得很别扭，如果是老旧项目，且大量界面存在这样的问题，那可以考虑此方案。
总结
遇到这种问题，不要局限一种方案，应该综合考量，可以多种方式同时采用，应该以工作量最少或最快保证系统可用为原则进行选择实现。
参考资料
(4 封私信 / 84 条消息) css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？ - 知乎 (zhihu.com)
css - 前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响？ - SegmentFault 思否
禁止web页面缩放解决方案 - 掘金 (juejin.cn)
CSS-浏览器缩放使边框大小改变，导致布局改变的问题 - 掘金 (juejin.cn)
css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题；_css的px与渲染出的px不一样-CSDN博客
Window.devicePixelRatio - Web API 接口参考 | MDN (mozilla.org)
页面缩放之zoom和transform:scale的比较 - 掘金 (juejin.cn)
--------------------------------------------------------------------------------------------------------
js获取屏幕缩放比例与分辨率
https://juejin.cn/post/6976449006071185439?searchId=202407212053040F1493DC6D415F8F770B
获取屏幕缩放比例
//获取屏幕缩放比例
function getRatio()
{
var ratio=0;
var screen=window.screen;
var ua=navigator.userAgent.toLowerCase();
if(window.devicePixelRatio !== undefined)
{
ratio=window.devicePixelRatio;
}
else if(~ua.indexOf('msie'))
{
if(screen.deviceXDPI && screen.logicalXDPI)
{
ratio=screen.deviceXDPI/screen.logicalXDPI;
}
}
else if(window.outerWidth !== undefined && window.innerWidth !== undefined)
{
ratio=window.outerWidth/window.innerWidth;
}
if(ratio)
{
ratio=Math.round(ratio*100);
}
return ratio;
}
获取分辨率
屏幕分辨率的高：window.screen.height*getRatio()/100 //乘以缩放比例为真实的像素
屏幕分辨率的宽：window.screen.width*getRatio()/100 //乘以缩放比例为真实的像素
屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
参考文章
https://www.cnblogs.com/tearer/archive/2010/09/06/1819471.html
www.cnblogs.com/tearer/arch… www.cnblogs.com/dyhao/p/114…
