一篇文章带你了解不同屏幕的页面适配

前言：很多小伙伴们在网站制作的过程中，会发现同样的页面在不同的屏幕下展示存在一定的差异，这究竟是什么原因呢？接下来，我用一篇文章带大家深入了解一下不同屏幕下页面差异的原因和解决方案！赶快点赞收藏起来吧！（文章结尾附有完整适配方案）

为方便大家理解，我们先了解一下显示器中几个常见变量的概念：

• 尺寸： 指电脑屏幕的现实宽高
• 分辨率： 指的是电脑屏幕上的像素点数量，例如，我们经常会在电脑的显示器设置里看到1920*1080，这就是指整个屏幕上水平1920个像素，垂直1080个像素，这也叫显示分辨率。
• PPI: 全称是(pixels per inch)，指的是每英寸像素的数量，简称像素密度
• DPR: 全称是(device pixel ratio) 指的是设备的像素点与css像素点的比例，简单来说，就是使用几个设备像素来绘制一个css像素，现在新款显示器大部分DPR都是2，就是用横2 * 纵2个设备像素绘制1个css像素，当然也有更高或者更低DPR的显示器

了解之后，我们通过下表来对比下，这几个变量与我们现实看到的【元素大小】 有什么样的关系？

序号	尺寸(正相关)	分辨率(负相关)	DPR(正相关)	现实大小
1	一致	一致	越大	越大
2	一致	越大	一致	越小
3	越大	一致	一致	越大

1. 第一条相当于我们在浏览器中自己放大或缩小页面，在放大或缩小的同时，DPR也会变化，另外不同的屏幕DPR可能也不一样。
2. 第二条相当于PPI不同，在实际使用中电脑系统也会调节DPR，让元素看起来不至于过大或过小。
3. 第三条，不同技术制造的像素点位大小也不同，若是同一分辨率和DPR，尺寸越大，元素看起来也就越大。

另外还有一个影响我们现实看到的【元素清晰度】的关键变量：PPI

• PPI越大，图像就越细腻，细节就越丰富，因为每英寸的像素数量更多了
• 通常情况下，PPI越大，DPR也会调大，它们俩存在一定的正相关关系

了解到这里，我们发现元素大小与尺寸、分辨率、DPR有直接关系；元素清晰度与PPI有直接关系，万变不离其宗，若以后再遇到大小或清晰度的问题，我们就知道从哪些变量入手。

---

接下来我们来看几个具体的例子：

1.用户不小心放大或缩小了页面

    很多用户在操作的时候有时候会不小心缩放页面，导致页面展示出问题，如果在移动端可以增加以下代码禁止其缩放：

`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" />`

    在PC端，尤其是windows系统，用户能通过键盘+鼠标滚轮可以缩放页面，如有必要，我们可以通过js来禁止其缩放，以保证页面正常展示：

document.addEventListener('mousewheel', function (e) {

      e = e || window.event;

      if ((e.wheelDelta && event.ctrlKey) || e.detail) {

        event.preventDefault();

      }

    }, {

      capture: false,

      passive: false

    });

    document.addEventListener('keydown', function (event) {

      if ((event.ctrlKey === true || event.metaKey === true)

        && (event.keyCode === 61 || event.keyCode === 107

          || event.keyCode === 173 || event.keyCode === 109

          || event.keyCode === 187 || event.keyCode === 189)) {

        event.preventDefault();

      }

    }, false);

2.图片失真

    我们有时候也会在别的网站看到一些图片比较模糊，有的可能是因为用户不小心放大了页面，比如一张300*300像素的图片页面被放大到了200%。一涉及到清晰度问题，就可以用PPI来解释了：假如之前每英寸能展示200像素的图片，放大一倍后，每英寸展示了100像素的图片，PPI变小了，图片就会变得模糊，PPI越大，图像越细腻清晰。

    这也像300*300像素的图片被设置成了700*700的宽高，如果是这种情况，可以让UI设计师给一个大于700*700分辨率的图片，这样图片就不会模糊了

3.Canvas失真

    在不同DPR的屏幕上，canvas细节也会不太一样，这时我们可以使用window.devicePixelRatio来确定添加多少额外的像素可以让图像更清晰：

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

// 设置canvas的展示大小
let size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// 设置canvas的实际大小, PPI越大的屏幕设置的也会更大，能让其显示地更细腻.
var scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// 规范化坐标系。
ctx.scale(scale, scale);

    另外有时我们会将网页从一个屏幕拖到另一个屏幕，若两个屏幕DPR不一样，我们可以使用matchMedia来监听DPR的值

let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;

const updatePixelRatio = () => {
  // todo...
};

updatePixelRatio();

matchMedia(mqString).addListener(updatePixelRatio);

4.投影仪模糊

    有时我们使用投影仪投影，影像很模糊，但当我们将投放出的影像尺寸缩小，或者将投影仪的分辨率增大，影像就会越清晰，其实也是PPI变大的原因。

5. 元素在不同大小屏幕上的比例过大或过小

    这是因为我们用了固定px写法，例如在1440*900分辨率屏幕放一个1440*900的元素，这时元素是占满整个屏幕的，但如果放在3360*2100的屏幕上，则只能铺满1/3的屏幕了。

以上用尺寸、分辨率、DPR、PPI等概念解释了多种大小和清晰度的问题，那什么样的写法可以很好规避这类的问题呢？

---

最佳适配写法(移动/PC端都适用)：

• 使用百分比来设定元素的宽度，高度则根据内容自动调整
• 使用flex、Grid相关css属性来灵活创建多种布局方式
• 使用rem，这里推荐px2rem库(可以根据窗口大小动态调整根节点像素大小)
• 媒体查询，可以为不同尺寸屏幕定制样式
• 使用vw、vh、vmin、vmax来根据视口大小调整元素大小和位置。
• 响应式布局，根据视口大小调整页面布局

最后分享一下比较热门的可视化库DataV，它的全屏展示适配方案，这种做法可以在窗口大小变化时，DPR变化时、手动缩放网页时、元素节点变化时都能自动缩放元素进行适配，希望能帮助到大家：

// 最外层节点样式
#dv-full-screen-container {
  position: fixed;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}

// 在页面初始化/元素节点变化(MutationObserver)/窗口大小变化(监听resize事件)
// 的时候缩放根节点或者缩放其他元素
root.style.transform = `scale(${document.body.clientWidth / screen.width})`

完整适配方案

屏幕适配方案——详细完整版（点击查看）