移动端页面开发-基础知识

407 阅读2分钟

前言

本文主要介绍移动端页面开发的一些基础知识及要点。

移动端与 PC 端区别

  • w3c 标准支持情况不同,移动端浏览器和 PC 端浏览器对一些 JS 和 CSS 的支持情况是不同的,可以在caniuse.com 网站上进行查询;
  • 交互不同,由于屏幕大小不一样,适合在 PC 端上使用的组件在移动端上交互会有所变化,一些页面内容需要触发才会进行展示;
  • 布局实现不同,在移动端没有 IE 的限制,布局实现方式在某些兼容性场景下,布局实现的方式比 PC 端多,比如较为典型的 flex 布局;
  • 性能考虑方向不同,一是移动端需要考虑弱网络环境,比如页面在 4/5 G 情况下页面加载效果会有所差异,二是移动端需要考虑图片适配和压缩问题等等;
  • 浏览器性能问题

移动端设备基础概念

  • 物理像素:设备屏幕的分辨率,设备出厂后就是固定的了,比如 iPhone6 的分辨率参数如下: image.png
  • 设备独立像素:与设备无关的像素,也就是 CSS 像素,它通过程序控制来实现。
  • 设备逻辑像素:在 PC 端浏览器模拟的 iphone6,即为逻辑像素,也称为逻辑分辨率。 image.png
  • 设备像素比,英文简称 DPR。称为设备像素缩放比,表示设备物理像素与设备独立像素的比例,也就是真实分辨率与 CSS 编程像素的比例,计算公式如下:
设备独立像素DPR=物理像素设备独立像素 * DPR = 物理像素

eg:DPR = 2,表示一个方向上 2 个物理像素对应一个 CSS 像素。则在屏幕上(2 个方向),使用 4 个物理像素显示一个 CSS 像素。

  • PPI,像素密度,表示每英寸的像素数目,数值越高,说明屏幕能以更高密度显示图像。

PPI = X2+Y2\sqrt{X² + Y²} / 屏幕尺寸

viewport 基础概念

  • width:layout width 可以理解为页面的宽度,width=device-width 是指页面的宽度等于设备宽度。当 width 宽度设置大于设备宽度,会显示横向滚动条,一般移动端,会设置 width = device-width,这样页面就不会出现横向滚动条了。
  • initial-scale
initialsacle=设备宽度/页面宽度initial-sacle = 设备宽度 / 页面宽度
  • maximum-scale:最大缩放值。
  • minimum-scale:最小缩放值。
  • user-scalable:是否允许用户对页面进行缩放。

移动端常用单位

  • em: 相对长度单位,相对于父元素的字体大小,根据父元素的大小变化而变化。
  • rem: 相对长度单位,相对于根元素 html 元素 font-size 的倍数,不会受父元素影响。
  • vw: 相对于视口的宽度(viewport 的 width 值), 1vw 就是视口宽度的百分之一。
  • vh: 相对于视口的高度,1vh 就是视口高度的百分之一。

参考