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

此处设置一个默认分辨率 1920*1080 , 设备尺寸15.6吋. (一般笔记本尺寸和分辨率)
默认dpi(win屏幕一般为72或96dpi) (PS默认新建文档默认值72, 72一般在网络上传输,300dip用于输出打印)

当设备的分辨率和设备尺寸不变的情况下,设备屏幕dpi(win屏幕一般为72或96dpi)在高于某个值(72或96dpi)的时候。屏幕的dpi就会影响网页缩放(从而影响网页布局

PS新建文档默认像素密度
在这里插入图片描述
1080分辨率的笔记本或显示的像素密度
设备分辨率与像素密度对网页缩放的影响_第1张图片

屏幕dpi是如何变化的呢?

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

win10 调整dpi
设备分辨率与像素密度对网页缩放的影响_第2张图片

125%、150%、175%、200%、300%代表放大等级,数值会由 windows系统自动设置,同时自己也可手动设置。
苹果手机4s以后与苹果电脑retina屏 都代表着 系统dpi大于72或96或115dpi。
附常用尺寸表以及dpi https://uiiiuiii.com/screen/
默认情况下,手机的尺寸较小,分辨率过大(1080或2k)导致设备dpi非常高(一般400以上)所以这就导致了网页在手机上字体会被放大**

解决方案

一 JS解决方案 此处不过多讨论

doc.documentElement.style.fontSize = (winWidth / 1080) * 100 +'px';

二 (先兼容布局) 设置CSS 媒体查询 @media screen 根据不同的分辨率和dpi来改变网页:字体、
尺寸、和HTML排列方式。**达到兼容不同分辨率和同一分辨率下dpi不同的网页兼容。

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

三 (在设置像素密度不同的兼容) css设置同分辨率下改变网页、字体大小、元素尺寸、和HTML排版方式

@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/(min-device-pixel-ratio: 1.25),
/*安卓ios使用谷歌火狐浏览器也可
使用*/
(min-resolution: 115dpi) /*IE 要使用 dpi单位 google的dppx不支持*/
{
     
/*样式书写处*/
}
  1. 像素密度计算网站 http://matanich.com/examples/pixel-density-tests/
  2. 获取当前设备的像素密度 https://www.mydevice.io/

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


<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.hh {
      
font-size: 16px;
background-color: rgb(255, 101, 101);
width: 500px;
}
/*像素密度计算网站 http://dpi.lv*/
/*获取当前设备的像素密度 https://bjango.com/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是如何变化的呢?)

设备分辨率与像素密度对网页缩放的影响_第3张图片
dpi放大倍率为1.25时效果
请注意下方网页UI字体大小 及柱状图下方文字菜单数量 以及 柱状图左侧Y轴数值
上方红线处是测试当前屏幕dpi 的放大倍数 (与windows 缩放与布局处一致 125%等于此处的 1.25
具体请参见:本章屏幕dpi是如何变化的呢?)

设备分辨率与像素密度对网页缩放的影响_第4张图片

你可能感兴趣的:(前端,css,javascript,css3,html5)