【移动端开发】移动端开发基础问题

一、屏幕相关

1、屏幕尺寸

屏幕的对角线的长度,单位是英寸,常见的手机屏幕大小有: 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等。
在这里插入图片描述

2、屏幕分辨率

屏幕出厂后,屏幕水平和垂直方向的固定像素点数
例如: IPhone 6 的屏幕分辨率为 750 * 1334。
显示分辨率指的是设备当前所用到的物理像素点数,屏幕分辨率 >= 显示分辨率。

3、屏幕密度

ppi/dpi 是指屏幕上每英寸里包含的物理像素点个数。
在这里插入图片描述

二、像素相关

1、物理像素

设备出厂后的每一个像素点,类似一个小灯泡,由屏幕制造商决定,屏幕生产后无法修改。
在这里插入图片描述

2、css像素

程序员写的,抽象长度单位,单位px,用来精确度量web页面上内容大小。

3、设备独立像素

设备出厂后的固定参数。
可以认为是计算机坐标中的一个点,由相关系统转化为物理像素
有了高清屏后1个css像素和1个物理像素就不在是1:1的关系了。

引言: 在没出现【高清屏】的年代,1个css像素对应1个物理像素,但自从【高清屏】问世,二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率就会更高,显示效果就会更佳细腻。苹果将这种屏幕称为:Retina 屏幕(又名:视网膜屏幕),与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。

对比:iPhone3G/S 与 iPhone4的成像效果:


在这里插入图片描述
与物理像素关系
普通屏幕下 1 个设备独立像素 对应 1 个物理像素
高清屏幕下 1 个设备独立像素 对应 N 个物理像素

与css像素关系
在无缩放的情况下(标准情况):1css像素 = 1设备独立像素

4、像素比

单一方向上设备【物理像素】和【设备独立像素】的比例。

window.devicePixelRatio
型号分辨率(物理像素点总和)设备独立像素(dip或dp)像素比(dpr)
IPhone 3GS320 * 480320 * 4801
IPhone 4 / 4s640 * 960320 * 4802
IPhone 5 / 5s640 * 1136320 * 5682
IPhone 6 / 7 / 8750 * 1334375 * 6672
IPhone 6p / 7p / 8p1242 x 2208414 * 7363
IPhone X1125 * 2436375 * 8123
HUAWEI P101080 x 1920360 x 6403

5、像素之间的关系

在不考虑缩放的情况下(理想状态下):
​ 普通屏(dpr = 1):1css像素 = 1设备独立像素 = 1物理像素
​ 高清屏(dpr = 2):1css像素 = 1设备独立像素 = 2物理像素
​ 高清屏(dpr = 3):1css像素 = 1设备独立像素 = 3物理像素

三、图片高清显示

位图:由像素组成,放大后会失真。
矢量图:有代码计算得来,不会失真。

位图放大失真原因:
一个位图被多个物理像素渲染。

解决办法:
1个位图像素对应1个物理像素。

// 借助媒体查询 
#demo {
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-image: url('./imgs/logo.png');
  }

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #demo {
      background-image: url('./imgs/logo@2x.png');
    }
}

四、视口相关

1、pc端视口

document.documentElement.clientWidth

2、移动端视口

(1)布局视口

移动端布局视口默认都是980px,布局视口的宽度决定了盒子想要沾满屏幕应该写多宽。
在这里插入图片描述

(2)视觉视口

用户可见的区域,它的绝对宽度永远和设备屏幕一样宽。
在这里插入图片描述

//部分浏览器看不到,一般也不通过代码看
window.innerWidth
(3)理想视口

布局视口=设备宽度
移动端解决方案:开启理想视口、移动端单独设置一套页面

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

五、缩放

1、 PC 端

放大时

  • 视口变小
  • 元素的 css 像素值不变,但一个css像素所占面积变大了。

缩小时

  • 视口变大
  • 元素的 css 像素值不变,但一个css像素所占面积变小了。

2、 移动端

放大时

  • 布局视口不变
  • 视觉视口变小

缩小时

  • 布局视口不变
  • 视觉视口变大

注意:移动端缩放不会影响页面布局,因为缩放的时候,布局视口视口没有变化。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页