移动端适配基础



  • 英寸

    用于描述屏幕的物理大小

    1英寸 = 2.54cm

    分辨率

    • 像素
      • 即一个小方块
      • 可作为图片或电子屏幕的最小组成单位
    • 屏幕分辨率
      • 指屏幕含有的像素数
      • 屏幕分辨率越高不代表屏幕越清晰,屏幕的清晰程度还与屏幕的尺寸有关
    • 图片分辨率
      • 指图片含有的像素数
      • 同一尺寸的图片,分辨率越高,图片越清晰
    • PPI(Pixel per Inch)
      • 每英寸包括的像素数
      • 可用于描述图片的质量屏幕的清晰度
      • PPI越大,图片质量越高,屏幕越清晰
    • DPI(Dot per Inch)
      • 每英寸包括的点数
      • 点:屏幕像素点、图片像素点或者是打印机的墨点等,是硬件设备最小的显示单元

    屏幕

    • 屏幕尺寸
      • 屏幕对角线的长度,单位是英寸
      • 常见屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
    • 屏幕分辨率
      • 指横纵向上的像素点数,单位是px
      • 一般用纵向像素点 * 横向像素点来表示手机的分辨率
    • 屏幕像素密度/像素密度/屏幕密度
      • 指屏幕每英寸可以显示的像素点的数量,单位是ppi(pixels per inch)

    像素

    • 物理像素/设备像素

      • 当我们买手机的时候会有一个n*m的分辨率,那是屏幕呈像的点,一个点为一个物理像素。
      • 任何设备的物理像素出厂时就确定了,是固定的
      • 设备像素/物理像素是显示设备中最微小的物理部件
    • 设备独立像素(Device Independent Pixels)

      • 与设备无关的逻辑像素
      • 简称DIPDP(Density Independent)
      • 对设备独立像素的理解
        • 我们必须用一种单位来告诉不同分辨率的手机,它们在界面上显示元素的大小是多少,这个单位即是DIP
        • 也可以将其理解为计算机坐标系中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后又相应系统转换为物理像素
      • 设备独立像素包含了CSS像素

      设备独立像素的产生:

      随着智能手机的发展,高分辨率的手机越来越多。那理论上来说,分辨率为320*480 手机上的图片和文字,在分辨率为640*950 的手机上会被缩放一倍,因为后者的分辨率提高了一倍,那么不就出现了分辨率越高、页面内容越小 的问题吗?

      然而并不是这样。在iPhone4的发布会上,乔布斯首次提出了Retina Display(视网膜屏幕)的概念,即将2*2个像素当成一个像素用,这样的屏幕看起来更加的精致,但元素的大小却不会改变

      回到我们上面的例子,也就是说,假如有一张图片的宽度为300像素,那么前者会用300个物理像素去渲染它,后者则会用600个物理像素去渲染它。

      当我们说图片的宽度为300个像素时,实际上可以说是:图片的宽度为300个设备独立像素

    • CSS像素(CSS Pixel)
      • CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。它是为web开发者创造的,在CSS或者JavaScript中使用的一个抽象的层。
      • CSS像素的单位为px

    设备像素比

    在视网膜屏幕出现后,才有了设备像素比这个概念。在这之前,移动设备都直接使用物理像素进行展示

    • 设备像素比简称dpr(device pixel ratio),即物理像素/设备独立像素
    • 设备像素比大于1的屏幕是高清屏
    • 在web中,我们可以用window.devicePixelRatio获取设备像素比

    移动端适配

    手机屏幕在最开始的时候,像素与发光点也是一一对应的,因此在之前,移动端的布局同pc端一样,直接写px就好了。

    • 为了适配所有机型,我们在写样式时需要将物理像素转换为设备独立像素
    • 有条件的话,和设计沟通好,所有的UI图按照设备独立像素来出

    视口

    视口(viewport)代表当前可见的计算机图形区域,通常情况下视口与浏览器窗口相同,但不包括浏览器的UI

    在手机互联网没有普及前,网络上的绝大部分页面都是为电脑端浏览而做的,根本没有做移动端的适配。

    随着移动端的发展,在手机上看网页这件事也变得非常普及。而电脑端页面较大,移动宽度有限。要想看到整个网页,会有很长的滚动条,非常麻烦。于是,浏览器厂商为了让用户在小屏幕网页下也能够显示的很好,所以把布局视口设置的很大,一般在768px~1024px,其中最常见的是980px

    • 布局视口(layout viewport)

      • 浏览器厂商设置的固定值 ,如980px,即是将980px的内容缩放到手机屏幕内。
      • 当我们以百分比来指定元素大小时,它的的值是基于这个元素的父元素计算而来。当这个元素是顶级元素时,它就是基于布局视口来计算的
      • PC 浏览器上,布局视口就相当于当前浏览器的窗口大小(不包括bordermargin、滚动条)
      • 在移动端,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,但是非常小,用户可以手动对网页进行放大。
      • 我们可以通过调用document.documentElement.clientWidthdocument.documentElement.clientHeight来获取布局视口的大小
      • 媒体查询时的max-widthmin-width的值指的也是布局视口的宽度
    • 视觉视口(visual viewport)

      • 用户通过屏幕真实看到的区域,默认值为当前浏览器的窗口大小(包括滚动条)
      • 当用户对浏览器进行缩放时,布局视口不变,而视觉视口发生相应的变化

      例如用户将浏览器窗口放大了200%,这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大,这时的一个CSS像素会跨越更多的物理像素

      • 我们可以通过调用window.innerWidthwindow.innerHeight来获取视觉视口的大小
    • 理想视口(ideal viewport)

      • 布局视口在移动端展示的效果并不是一个理想的效果:因为移动端的视觉视口通常小于浏览器默认的980px的布局视口,所以苹果引入了理想视口这一概念:网站页面在移动端展示的理想大小,即整个页面刚好覆盖手机屏幕,屏幕不会产生滚动条
      • 此时布局视口的宽度就定义为设备宽度device-width
      • 我们可以通过screen.widthscreen.height来获取理想视口的大小

 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

Looks like your connection to Dian was lost, please wait while we try to reconnect.