文章目录[隐藏]

• 1.手机的分辨率和手机浏览器的分辨率。

目录:

1.移动浏览器分辨率

2.手机网站和pc网站需要分开吗？

3.dpr和多重图形

4.常见的移动终端适配方法

5.大厂手机浏览器适配方法

前端开发者需要学习移动适配吗:从全球来看，2020年所有网站访问量的68.1%将来自移动设备，高于2019年的63.3%。台式机带来了28.9%的访客，而3.1%的访客来自平板电脑。

2021年，全球网站的移动设备访问量势必超过70%，所以网页的移动适配知识现在是前端开发者的必修课。让我们回顾并讨论一下我们需要了解的关于移动改编的知识。

1.手机的分辨率和手机浏览器的分辨率。

首先明确一点，手机分辨率和手机浏览器分辨率不是一回事。

一般来说，我们使用的手机的分辨率要比手机浏览器的分辨率高很多。因为手机分辨率大会让手机显示的内容更加细腻，比如消除了画面的颗粒感；移动浏览器的低分辨率是为了让用户更好地识别一些内容，比如较大的文本。同时这种设计也可以让手机浏览器显示一些专为pc设计的网页，这样文字太小无法识别，或者排版太拥挤看不清楚。

从下图中我们可以清楚的看到手机分辨率和手机浏览器分辨率的大小和倍数的关系:(手机浏览器的大小也叫viewport size -viewport)

可以看到目前旗舰手机的像素比dpr(设备像素比)已经达到了3和4，这对我们前端开发者选择图片大小提出了新的要求，后面会参考多张图。

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

这里说的视口大小是一个重要的知识点，尤其是在手机网站开发中。我们将在所有这些地方使用它。

m深圳生活网ate标签中

Width=device-width表示当前视窗的宽度等于设备的宽度。如果不设置这个，当前视口默认为980px，超出了普通手机的视口大小。对这部分有疑问的同学可以看看ppk的三视图的解读。Initial-scale=1.0深圳生活网这句话的意思是缩放比例等于1，即不允许手动缩放。

声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。分享目的仅供大家学习与参考,不代表本站立场。