移动端布局 - 设备像素比

CharlesY
600 阅读7分钟

视口概念

A viewport represents the area in computer graphics being currently viewed.In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.

  • On larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
  • On most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen.
  • In fullscreen mode（全屏模式）, the viewport（视口） is the device screen（设备屏幕）, the window is the browser window（浏览器窗口）, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.

The web contains two viewports, the layout viewport and the visual viewport.

  • layout viewport（布局视口）：The area within the Window.innerHeight and Window.innerWidth of the web document.

image.png

  • visual viewport（视觉视口）：the part of the web page that is currently visible in the browser and can change.

image.png

PS：理想视口：是指对设备来讲最理想的视口尺寸，使用的设备有多宽，所展示的页面就有多宽。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

image.png

两者区别

  1. 本质区别

    • PC端布局：本质是让页面文档能够在PC端浏览器上正常地显示，由于PC端浏览器窗口一般较大，网页文档的视口大小一般就是浏览器窗口的大小
    • 移动端布局：本质是让文档在不同硬件分辨率的移动设备上正常地显示，如果按照PC端的视口要求，则会出现文档有较大一部分无法在视觉视口内显示，只能频繁拖动滚动条，因此一般会让页面的视口大小根据移动端设备屏幕大小自适应

  2. 兼容性区别

    • PC端布局：一般不用考虑硬件分辨率的适配，主要考虑网页文档对不同浏览器是否兼容，尤其是部分CSS新特性的兼容性以及对IE浏览器的兼容性
    • 移动端布局：移动端一般不用考虑浏览器兼容性问题，因为不论是Android还是IOS手机，浏览器都是webkit内核，可以放心使用CSS新特性，但需要考虑硬件分辨率以及操作系统的适配，因为不同厂商的手机设备像素比是不同的

  3. 布局方案区别

    • PC端布局：常采用传统静态布局（普通流+float+position）、响应式布局（百分比+媒体查询）
    • 移动端布局：常采用flex布局、rem布局

  4. 事件区别

    • PC端：一般会有鼠标操作的事件，但缺少部分基于移动端设备的事件，例如触屏操作、唤起手机键盘等
    • 移动端：可以通过触屏实现点击操作，但缺少PC端基于鼠标具有的事件功能，例如hover事件

屏幕尺寸、屏幕比例、屏幕密度、物理分辨率和逻辑分辨率

  • 屏幕尺寸：屏幕的对角线长度，例如，2.8英寸、3.7英寸，iphone3和iphone4的都是3.5英寸
  • 屏幕比例：屏幕的长宽比，例如，16:9、16:10（宽屏），4:3（窄屏）
  • 屏幕密度：以屏幕分辨率为基础，沿屏幕长度方向排列的像素
  • 物理分辨率：显示屏可显示的最高像素数，由屏幕实际存在的像素的行数和列数相乘而得，是固有的参数，出厂设定，不能修改，例如，电脑的物理分辨率如果为1980x1080，那么最高可以设置显示的分辨率为1600x900，但不能超过1980x1080。
  • 逻辑分辨率（CSS分辨率）：也称为直觉像素/虚拟像素/设备独立像素，主要是前端开发中所使用的一种抽象概念，最开始的CSS分辨率与物理分辨率是一致的，随着Retina屏的问世，同样的屏幕尺寸可装下更大的物理分辨率，CSS分辨率便主要体现在在开发中，由此也衍生出了二倍图的设计。
  • 每英寸像素(pixel per inch，ppi)：表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式 ppi=水平像素个数2+垂直像素个数2屏幕尺寸ppi = \frac{\sqrt{水平像素个数^2+垂直像素个数^2}}{屏幕尺寸}

总结可知：

  1. 物理尺寸相同的情况下，密度越高，分辨率越高，图像和文字看起来越清晰。

  2. 分辨率和密度相同的情况下，物理尺寸越小，图像和文字看起来越清晰。

设备像素比（devicePixelRatio,dpr）

在传统的CSS设计中，一般使用px作为图形计算单位，之前的PC浏览器中1个CSS像素所对应的就是1个电脑屏幕的物理像素，并且在一些移动设备（例如，iphone 3gs）也是1个CSS像素对应1个屏幕的物理像素，相当于iphone3gs的硬件屏幕分辨率是多少，UI图就可以完全按照这个分辨率进行设计，但随着技术进步，摩托罗拉公司研发出Retina屏技术，最初应用于MOTO Aura，其重要的功能是更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。在第三代iPad发布会上，苹果给出了Retina设计标准的公式，从IPhone4开始，便进入到了Retina的web时代。

而在Retina屏的应用上，分辨率发生了什么变化？就IPhone4而言，屏幕尺寸与IPhone3一样，都是3.5英寸，但iphone3的物理分辨率为320×480像素(HVGA)，iphone4为640×960像素，相当于是同样大小的屏幕，但容纳了更多的物理像素。在CSS开发中，UI设计图如果按照1个CSS像素对应1个物理像素的话，放在iphone4中就相当于只能显示1/4了，如果强制拉满屏幕，就会导致图像显示非常模糊，因此UI设计图一般会按照物理像素进行设计，因此，便出现了设备独立像素与物理分辨率之间呈现出一定的比例（设备像素比）。

设备像素比(dpr，devicePixelRatio)= 物理像素 / 独立像素

设备像素比.png

常见设备设备像素比
IPhone6/7/82

为什么要使用二倍图

前端开发流程中，首先会对界面和素材进行UI设计，那么就需要保障使用的图片素材是清晰，不会出现模糊，以iphone3gs和iphone4来说，屏幕大小都是一样的3.5英寸，但是iphone4的分辨率比iphone3更大，因此如果按照CSS像素与物理像素一致的方式进行设计，那么iphone3上可以正常显示，但在iphone4上就只会显示1/4，如果强行伸缩图片占满iphone4全屏，那么就会出现图像模糊了，因此Retina屏技术的手机设备一般就需要使用二倍图，甚至是多倍图。

PS：在前端开发的时候，拿到设计图纸后，一般会通过PS软件测量出其长度、分辨率等，然后再通过编程语言实现，而在PS中测量的一般就是物理分辨率，在CSS中需要根据设备像素比进行一定比例的换算。

关键代码 - 视口属性

<!-- HTML中如何修改视口属性 -->
<meta name="viewpoint" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
属性值说明属性值说明
width=device-width视口宽度=设备宽度maximu-scale=1.0最大缩放倍数
initial-scale=1.0初始，页面的缩放倍数user-scalable=0禁止用户缩放页面

注意事项

如果是涉及移动端布局，那么拿到UI设计图的时候，首先要明确目标设备的设备像素比是多少，根据设备像素比，将UI设计图的物理像素按比例换算出CSS像素，然后在CSS中进行编码，这样输出的结果在目标设备上刚好就是物理分辨率。

例如，IPhone6的设备像素比为2，CSS分辨率为375x667，物理分辨率则为750x1334，如果拿到的UI设计图长宽分别为80px和40px，则在CSS中应该将长宽分别写为40px和20px。

image.png

文章如有纰漏，还请各位前辈指正，感谢Thanks♪(･ω･)ﾉ。

avatar
文章
阅读
粉丝