目录：

1、手机浏览器分辨率

2、移动端和pc端网站需要分开吗

3、dpr和多倍图

4、常见移动端适配方式

5、大厂手机浏览器适配方式

前端开发人员需不需要学习移动端适配： 在全球范围内，2020 年所有网站访问的68.1%来自移动设备，比 2019 年的 63.3% 有所增加。台式机带来了 28.9% 的访问量，而 3.1% 的访问者来自平板电脑。

2021年全球网站访问来自移动设备势必会突破70%，所以网页的移动端适百思特网配知识是现在前端开发人员的必修课。下面我们就移动端适配需要了解哪些知识，一起回顾和讨论一下。

1、手机的分辨率和手机浏览器的分辨率

首先我们得清楚，手机的分辨率和手机浏览器分辨率不是一个东西。

一般来说，我们使用的手机的分辨率远大于手机浏览器的分辨率。因为手机分辨率大会让手机显示的内容更细腻，比如消除图片的颗粒感；而手机浏览器分辨率小则是为了让用户对某些内容更好辨认，比如更大的文字，同时，这样的设计也可以让手机浏览器展示一些为pc端设计的网页而不至于由于文字太小无法辨认，或者排版挤成一团看不清楚。

从下边几张图，可以很清楚的看见手机分辨率和手机浏览器分辨率的大小和倍数关系： （手机浏览器的大小也叫视口大小-viewport）

可以看到现在的旗舰手机的像素比dpr(device pixel ratio)已经达到了3和4，这对我们前端开发人员选择图片的大小提出了新的要求，后边我们会提到多倍图。

还有就是视口宽度，我们根据查询现有的大部分手机型号，看到目前的手机视口宽度最小是320px，最大是428px，所以我们一般在媒体查询时，把视口宽度小于540的设备归为手机设备。

这里提到的视口大小viewport是比较重要的知识点，移动端网站的开发中尤为重要。我们在这几个地百思特网方都会用到它。

• mate标签中

width=device-width这句话的意思是让当前viewport的宽度等于设备的宽度。如果不这样设置百思特网的话，当前viewport默认是980px，是超出一般手机视口大小的。对这个部分存疑的同学可以看一下ppk的3个viewport的解读。 initial-scale=1.0这句话是说缩放比等于1，也就是不允许手动缩放。