设备分辨率与像素密度对网页缩放的影响

看见就非常 2022-04-28

展开全文

我的笔记分辨率 2560*1600 比例16:10 , 设备尺寸16吋

在这里插入图片描述

默认dpi (像素密度)如图红框中显示在这里插入图片描述

当设备的分辨率和设备尺寸不变的情况下，设备屏幕dpi（像素密度）在高于某个值的时候。屏幕的dpi(像素密度)就会影响网页缩放（从而影响网页布局）访问此地址查看电脑屏幕当前分辨率和使用的dpi https://www./

屏幕dpi是如何变化的呢？

默认情况下：设备尺寸过小 , 分辨率过高导致设备dpi大于每英寸/72或96, windows会自动对屏幕显示进行放大。进而导致浏览器展示的网页被放大 (从而导致网页中、字体、元素尺寸变大，导致网页布局错乱)。
开发者为了调试在不同dpi下网页的缩放和布局故意更改设备dpi。

以win10为例调整dpi 在这里插入图片描述
这时候再访问 https://www./ 查看屏幕分辨率和 dpi 结果如下

**

结论:

在分辨率不变，且屏幕比例不变（16:10）的情况下改变屏幕的缩放比例（dpi）会将屏幕的分辨率改变且影响网页中的元素宽度以及字体大小等。导致网页布局出现问题

如使用的设备比例不变（16:9）或（16:10）这两种在当下比较常见的网页只需要按照此比例的设计稿还原即可。即便用在4K 或更大分辨率的显示器上，系统（win或mac）会自动设置缩放比例。网页也可达到一个比较好的浏览效果

以上的方式较为适用于甲方固定的使用场景如大屏如某个信息系统因为他们的设备多为统一采购。保证硬件统一性即可。大屏也可一开始设置为大屏的真实分辨率，网页开发直接将字体或元素尺寸写大，不使用系统的自动缩放（但此时应该关闭系统的自动缩放）看取舍吧

如果是一般性网页要给用户使用（比如电脑和手机或Ipad访问）这时候不仅要考虑分辨率不变缩放（dpi）变化带来的影响还要考虑缩放（dpi）不变分辨率变化带来的影响。一般采用媒体查询+js设置字体rem的方式来实现

媒体查询中又分为分辨率的媒体查询

css设置分辨率区间改变HTML布局达到兼容
@media screen and (min-width: 990px/*起始最小宽度*/) and (max-width:1200px/*结束最大宽度*/){
/*样式书写处*/
}

和 dpi（像素密度或者屏幕缩放）媒体查询

@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/(min-device-pixel-ratio: 1.25),
/*安卓ios使用谷歌火狐浏览器也可
使用*/
(min-resolution: 115dpi) /*IE 要使用 dpi单位 google的dppx不支持*/
{
/*样式书写处*/
}

解决方案

一 JS解决方案

/**
 * 该方法是以iPhone6（真机宽度：375）对于设计稿web宽度（750）来计算rem
 * 其他元素px值转换为rem则使用：rem=px/100
 */
function setRem () {
  // 375 默认大小16px
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0]
  // 设置根元素字体大小
  const standardFontSize = (htmlWidth / 7.5)
  htmlDom.style.fontSize = standardFontSize + 'px'
}

// 初始化
setRem()

二设置CSS 媒体查询相对来说网页元素或组件要有比较好的通用性，修改起来才比较方便

分辨率改变的操作

css设置分辨率区间改变HTML布局达到兼容
@media screen and (min-width: 990px/*起始最小宽度*/) and (max-width:1200px/*结束最大宽度*/){
/*样式书写处*/
}

dpi（像素密度或者屏幕缩放）改变的操作

@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/(min-device-pixel-ratio: 1.25),
/*安卓ios使用谷歌火狐浏览器也可
使用*/
(min-resolution: 115dpi) /*IE 要使用 dpi单位 google的dppx不支持*/
{
/*样式书写处*/
}



## 示例DEMO / 同分辨率下不同 dpi下处理

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--响应式网页 必备meta标签-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hh {
font-size: 16px;
background-color: rgb(255, 101, 101);
width: 500px;
}
/*像素密度计算网站 http://*/
/*获取当前设备的像素密度 https:///articles/min-device-pixelratio/*/
@media screen and (min-resolution: 1.25dppx/*通用像素密度*/),(min-devicepixel-ratio: 1.25/*谷歌或安卓或ios使用*/),
(min-resolution: 115dpi/*万恶的IE*/)
{
	.hh {
		font-size: 30px;
		background-color: rgb(255, 108, 108)
	}
}
</style>
</head>
<body>
<p class="hh"> 这是测试文字</p>
</body>
</html>

真实示例

dpi放大倍率为1时效果
请注意下方网页UI字体大小及柱状图下方文字菜单数量以及柱状图左侧Y轴数值
上方红线处是测试当前屏幕dpi 的放大倍数 (与windows 缩放与布局处一直 100%等于此处的 1 具体请看文档开头)
在这里插入图片描述
dpi放大倍率为1.25时效果
请注意下方网页UI字体大小及柱状图下方文字菜单数量以及柱状图左侧Y轴数值
上方红线处是测试当前屏幕dpi 的放大倍数 (与windows 缩放与布局处一致 125%等于此处的 1.25
具体请参见：文档开头)
在这里插入图片描述