移动端适配

Posted 2021-09-28 jansen

补发18年文章
前几天在想设备像素比的时候，突然想到iphone6p的设备像素比是3，但是设备独立像素是414，414*3大于1080啊，就有点懵，因为一直以为都是直接用物理像素/独立像素的比就是设备像素比，于是就有了接下来的复习。

• 设备像素(dp)

设备像素即物理像素，知道是设备能控制显示的最小单位，就是显示屏上一个个的像素点（以iphone6来说，iphone6宽有750个像素点，长有1334个像素点）

• 屏幕尺寸

指得是屏幕对角线长度，单位是英寸，1英寸 = 2.54厘米。

• 屏幕分辨率

指的是手机屏幕的物理像素点数，就是纵向设备像素横向设备像素表示，比如iphone6 是1334750

• 屏幕像素密度（ppi）

指的是每英寸物理像素点数量Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.7

• 设备独立像素（dip)

也可以称之为逻辑像素，这个点是给程序控制和使用的，是抽象的。现在的高分辨率屏幕会用多个设备像素来显示一个设备独立像素。比如iphone6上宽度的dip是375，iphone6+是414(标准模式)\'，window.screen.width可取

• 设备像素比(dpr)

指的是设备像素和设备独立像素的比例。通常情况之间用设备分辨率的宽除以设备逻辑宽就可以。比如iphone6就是750/375 = 2。在程序中可以通过window.devicePixelRatio来获取。
多数情况下，我们的图片都是以dpr2来设置的，也就是说，实际情况下，iphoneX下显示的图片会有略微的模糊。但是专门去适配的很少，因为都是网络上传的图片。
如果后台支持的话，可以用srcset来做到。只需要提供图片资源、以及断点，其他都交给浏览器智能解决，浏览器会自动根据场景匹配最佳显示图片

    <img src="128px.jpg"
        srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
        sizes="(max-width: 360px) calc(100vw - 20px), 128px">

移动端完美支持，就算安卓4.3、4.4不支持也可以用默认的src
如果是本地的话，还有一个熟悉image-set可以用，就是不支持安卓4.3

div {
    background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}

所以原生端的情况，都会使用@2x,@3x的图来匹配对应的设备。

• viewport

viewport是一块区域，浏览器根据这个区域来计算宽度是百分比的元素的宽度。描绘图案。
一般来说PC端端viewport跟浏览器的大小是一致的，移动端的viewport 宽度大多都是980px，可见移动端的viewport比真实的移动端屏幕大多了。window.innerWidth
所以，我们写代码的时候，在h5页面基本都会加上meta标签

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

可以看到name=viewport，就是用于控制页面缩放的

但是我们通常看到的meta标签并不止一个，那么meta标签有什么作用呢？
meta标签是html标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。

平常使用最多的莫过于descriptopn和keywords了，用于搜索引擎搜索的

既然不同的手机，它们的设备独立像素并不一样，那么如果我在iphone6p上使用宽度200px的div在iphone6p上还只是占屏幕的一半不到，到了iphone4上就会立马超过一半了。
这个时候，rem就派上用场了。

• rem（font size of the root element）

即根据根元素的 font-size 来设置字体的大小。跟 px 一样，它是 CSS 中的一个样式单位，会根据根元素的 font-size 值来转换成 px 单位，公式为：px = rem * html(font-size)

那么，如何去选择一个基准来设置根元素的font-size呢？

选择iphone手机使用分辨率最广的手机来设置，跟着设计师走

5年前，设计师还是以iphone4的基准来设置640

现在，设计师已经按照iphone6的基准来设置750

那么，算法就很容易了

device-width / 750 * 100

以iphone6为例，2倍的dpr。375 / 750 * 100 = 50px；

这样的话，设计稿上面24px，就直接写0.24rem; 0.24*50 = 12px实际渲染。

这样的话，如果页面超过750px了，就会出现超过PC大小的像素，所以就需要判断一下当 deviceWidth 大于 750px 时我们不应该再改变根元素的 font-size 值

(function(window) {
    function refreshRem() {
        var docEl = document.documentElement;
        var screenWidth = docEl.getBoundingClientRect().width;
        var rem = Math.min(screenWidth, 750) * 100 / 750;
        docEl.style.fontSize = rem + \'px\';
    }
    refreshRem();
    window.addEventListener(\'resize\', function() {
        clearTimeout(time);
        time = setTimeout(refreshRem, 300);
    }, false);
})(window);

$vm_base: 750; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}