小白入门移动端系列（一）：设备像素比二三事

带着问题找答案

1.移动端的物理像素和设备像素是什么

2.什么是Retina屏幕？

3.什么是像素比？

4.布局视口、视觉视口、理想视口是什么东东？

5.如何理解<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

---

推荐阅读

1.小白入门基础

2.复习总结物理像素、设备像素

3.理解meta标签、布局视口和视觉视口

---

个人学习与总结

以下总结略显笼统，但都是上面从上面几篇文章学习来的精华之处，此处仅作为个人总结参考之用。因为写文章太费神费力，小白又有懒惰之心，故请各位大神们多多包涵，以后也会逐步改进自己的分享模式

1.物理像素和设备像素、Retina屏幕、设备像素比

• 设备像素：手机屏幕的实际宽和高
• 物理像素：屏幕上最小的单位，dpr=1时，1px设备像素 = 1px物理像素；dpr=2时，1px设备像素 = 2px物理像素；
• 设备像素比dpr：JS中由window.devicePixelRatio得出，CSS用设备像素比dpr适配时，利用device-pixel-ratio进行媒体查询。
• Retina屏幕：高清屏幕，1px有两个或3个像素点；

在不同的屏幕中，无论是普通屏幕还是retina屏幕，css像素所呈现的大小是一致的。不同的是，1px像素对应的物理像素的个数。

2.PC端视口和移动端视口的不同之处

这点上PC端和移动端有很大区别，刚从PC转战移动端的小白确实是俩眼一抹黑。有必要认真学习上面第三篇大佬的文章，仔细拜读真经，方能立地成佛呀！

• PC端的布局视口 = 浏览器宽高 = 浏览器可视窗口；布局视口和视觉视口（浏览器宽高一致）

• 移动端的布局视口（layout viewport）

移动端的布局视口、视觉视口是独立存在的，布局视口 != 浏览器视口，为了让用户在小屏幕下，网页也友好的显示，布局视口宽度一般很大在768-1024px之间，但移动端的浏览器视口宽度才300-400px左右！

我们可以做个试验，移动端在不添加meta标签时，默认的布局视口是980px，远大于移动端可视区域的宽度 获取布局视口的宽度：document.documentElement.clientWidth 获取可视区域的宽度：window.innerWidth

• 移动端的视觉视口（visual viewport）

这就是我们常说的手机的实际宽度和高度啦！

视觉视口是呈现给用户的，网页区域内的CSS像素的数量，dpr=2时，1px = 2css像素，用户可以自由进行缩放，所以并不需要开发者重点关注。

放大页面时，布局视口不变，视觉视口变小。 缩放页面--布局视口不变，视觉视口变大。

• 移动端的理想视口（idea viewport）

视觉视口和布局视口不一致对开发者来说很烦人，不知道该去适配哪一个，这时理想窗口就出现啦！理想窗口：布局视口=页面宽度

• 如何实现布局视口=页面宽度呢？

我们的meta标签就出场了！width=device-width就是让：布局视口=页面宽度

initial-scale=1.0：让页面的初始缩放比例=1

转载于:https://juejin.im/post/5bdaf045f265da393431433b