移动web的适配

article/2025/10/10 11:37:54

我在另一篇文章中谈到过一些移动端分辨率自适应问题，主要是基于个人实际开发中遇到的问题提出的解决方法。
近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。

Part 1 理解关于长度单位的一些概念

1、设备像素或逻辑像素
指设备能控制显示的最小物理单位，意指屏幕上一个个的点
（还是不理解？？太正常了，接着往下看）
2、CSS像素或设备独立像素
指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt）
（这个好理解吧）
3、像素密度（PPI）
指设备能控制显示的最小物理单位，意指屏幕上一个个的点
（嘻嘻，=设备像素或逻辑像素）
PPI越高，分辨率也就越高
4、像素比（dpr）
设备像素比=设备像素/CSS像素
比如：iPhone6的像素比为2 = 750/375
在这里插入图片描述

在开发中，UI设计狮以设备像素制作设计图；
前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页

进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况
在这里插入图片描述
以下两种情况都会带来一定的图片不正常的问题

Part 2 关于视口的概念

1、Layout viewport（布局视口）
浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动触摸方式缩放网页。
2、Visual viewport（视觉视口）
物理屏幕的可视区域，屏幕显示器的物理像素。同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。（如手机屏幕iPhone6为375px）
3、Ideal viewport（理想视口）
通常是我们说的屏幕分辨率

他们之间的关系总结一句话：改变布局视口，让视觉视口达到理想视口
（若小于视觉视口就会出现滚动条）

Part 3 移动端适配的解决方案

一般我们会先在<head>标签中加<meta name=“viewport”>

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

其中，width设置布局视口的宽，initial-scale设置页面的初始缩放程度，maximum-scale设置了页面的最大缩放程度，minimum-scale设置了页面的最小缩放程度，user-scalable即是否允许用户对页面进行缩放操作

下面介绍几种更好的适配方案，重点来了！！！
1、@media媒体查询
具体百度即可查到，不赘述
弊端：要根据不同的手机宽高作穷举，特别对于各种各样的Android手机，要穷举太多

2、淘宝方案flexible.js
淘宝前端团队自己做了一套能适配的flexible.js，这个要在<body>前引入，不需要另外引入<meta name=“viewport”>
弊端：查看源码（源码）可以看到，在flexible.js中1rem=75px，这样我们在开发时要用rem，每次换算都很麻烦，比较除以75很容易除不尽之类的
解决方案：可以将源码改一下，改成width/7.5或者width/10，方便计算

3、动态设置rem
提到上面的改源码，其实质就和这个方法很类似了。这个方法就是我在移动端分辨率自适应问题这篇文章中谈到的，自己写js去动态设置rem，不同的是这里要加<meta name=“viewport”>，附上一段比较完整的js代码
在这里插入图片描述