移动端基础概念

时间 2019-11-08

标签移动基础概念栏目无线繁體版

原文原文链接

基础概念

屏幕尺寸

指屏幕的对角线的长度，单位是英寸，1英寸 = 2.54厘米
常见的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等

屏幕分辨率

在横纵向上的像素点的个数，单位是px，1px = 1个像素点。
通常以纵向像素 * 横向像素来表示一个手机的分辨率，好比 1960*1080(这里的1像素指的是物理设备的1个像素点)

高清屏

高清屏(Retina：又称视网膜屏)与普通屏相比，相同区域的物理像素点数是普通屏的4倍(DPR=2)
具有足够高的物理像素密度而令人肉眼没法分辨其中单独像素点的液晶屏
是一种具有超高像素密度的液晶屏
一样大小屏幕上显示的像素点由一个变为多个

物理像素

又称为设备像素，它是屏幕能显示的最小粒度
买手机的时候会有一个 n x m 的分辨率，那是屏幕的 n x m 个呈像的点，一个点（小方格）为一个物理像素
设备像素也被称为物理像素，它是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和高度
任何设备的物理像素都是固定的，任何一款设备上1物理像素的大小是不会变得
不一样设备上1物理像素的大小多是不同的

CSS像素

CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量Web页面上的内容
它是为Web开发者创造的，在css或者javascript中使用的一个抽象的层
通常状况下，css像素被称为与设备无关的像素(device-independent像素)，简称"DIPs"
在一个标准的显示密度下，一个css像素对应着一个设备像素

像素中的最小单位

物理像素是设备呈像的最小单位
css像素是浏览器中的最小单位（即web开发中的最小单位）
位图像素是图像的最小单位

物理像素与CSS像素的关系

一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于屏幕的特性（是不是高密度，即像素比）和用户的缩放行为
- 在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
- 若是用户进行放大操做，视觉视口尺寸变小（尺寸：放的css像素个数），它将跨越更多的设备像素
须要注意的是，css像素与物理像素的关系是靠浏览器厂商在维护，并非设备厂商
css像素是浏览器中特有的概念

屏幕像素密度

又称像素密度或屏幕密度
屏幕上每英寸能够显式的像素点的数量，单位是ppi(pixels per inch)
屏幕像素密度与屏幕尺寸和屏幕分辨率有关

设备独立像素

设备独立像素，又称密度物管像素，能够理解为是计算机坐标系统中的一个点
这个点表明一个能够由程序使用的虚拟像素（好比：css像素），而后由相关系统转换为物理像素
它是css像素转换物理像素过程当中很重要的一个环节
设备独立像素能够当作是设备提供的接口，用于对接应用的一些概念（如浏览器中的css像素）
只有当浏览器厂商对接上设备的独立像素时，浏览器厂商设计的移动端规则才能起做用，不然将采起默认的规则

位图像素

1个位图像素是栅格图像（如：png,jpg,gif等）最小的数据单元
只有当1个位图像素对应1个物理像素时，图片才能获得完美清晰的展现

像素比(DPR)

像素比指物理像素和设备独立像素的比例(即：devicePixelRatio = 物理像素 / 设备独立像素)
像素比 = 一个方向上占满一块屏幕须要的物理像素的个数/一个方向上占满一块屏幕须要的设备独立像素的个数
注意，像素比是比较个数而不是比较面积
添加 <meta> 标签 width=device-width ，能够将css像素与独立像素连接，此时能够把设备独立像素当作物理像素（即：物理像素 = 设备独立像素）
像素比能够经过 window.devicePixelRatio 来获取

移动端视口

移动端浏览器一般宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，若是仍以浏览器窗口做为视口的话，网站内容在手机上看起来会很是窄。所以，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度再也不相关联。javascript

布局视口（layout viewport）

布局视口的宽度/高度能够经过 document.documentElement.clientWidth / Height 获取。
布局视口使视口与移动端浏览器屏幕宽度彻底独立。CSS 布局将会根据它来进行计算，并被它约束
布局视口用于解决早期的pc端页面在手机上显示的问题。
iOS, Android 基本都将这个视口分辨率设置为 980px，因此 PC 上的网页基本能在手机上呈现，只不过元素看上去很小

视觉视口（visual viewport）

视觉视口是用户当前看到的区域，用户能够经过缩放操做视觉视口，同时不会影响布局视口。
当前缩放值 = 理想视口宽度 / 视觉视口宽度：用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。
视觉视口决定了物理像素和css像素之间的比例

理想视口

只有当咱们在页面中加入viewport的meta标签时，理想视口才会生效 <meta name="viewport" content="width=device-width"> (这句代码的意思是：布局视口宽度 = 理想视口宽度)
理想视口包含的css像素的个数等于独立设备像素的值
理想视口由浏览器厂商定义，所以同一设备上的不一样浏览器拥有不一样的理想视口
浏览器理想视口的大小也取决于设备,同一款浏览器在不一样设备上拥有不一样的理想视口

完美视口

当咱们在页面中加入viewport的 <meta name="viewport" content="width=device-width;initial-scale=1.0"> 标签时,完美视口才会生效
width=device-width 和 initial-scale=1.0 这两个条件只要缺一条就不是完美视口，而是理想视口
完美视口不只仅只能解决旋转时的问题，当页面中存在太大的元素时，假如使用理想视口，某些浏览器会扩展布局是口的宽度来容纳这个元素。此时，使用完美视口能够规避这个问题

推荐写法：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

布局视口与理想视口的关系

布局视口只规定出如今视口元素中的排列规则，它仅仅是移动端浏览器的一个属性。在物理像素和css像素1:1的状况下，能够认为布局视口比设备宽度（分辨率）要大不少
视觉视口决定了用户能看到什么
- 从css像素角度出发，因为视觉视口所包含的css像素的个数跟用户的缩放行为有关，咱们没法准确的判断视觉视口的尺寸。
- 默认状况下（物理像素：css像素 = 1:1），一个视觉视口包含该设备分辨率的值所表明的css像素个数
- 视觉视口包含了整个布局视口
移动端在初始化时，视觉视口会将整个布局视口完整显示出来，因此移动端浏览器在初始化的时候，物理像素与css像素之间的比例不多是一比一，这个比例与设备分辨率和布局是口的大小有关
- 这个比例的本质上和视口有关，由于移动端浏览器初始化时视觉视口包含的css像素个数等于布局视口包含的css像素个数
- 视觉视口包含的物理像素个数等于设备的分辨率

获取三个视口的宽度（移动端）

布局视口
- var layout = document.documentElement.clientWidth
- 无兼容性问题
视觉视口
- var visual = window.innerWidth
- 接近所有支持
理想视口
- var dream = screen.width
- 一些设备表明理想视口宽度，一些设备表明设备的分辨率，有极大的兼容性问题

缩放

用户缩放

只影响布局视口
放大：一个css像素的面积变大，区域内css像素的个数变少，视觉视口的尺寸变小
缩小：一个css像素的面积变小，区域内css像素的个数变多，视觉视口的尺寸变大
在pc端用户缩放影响视口的尺寸
在移动端用户缩放影响视觉视口的尺寸

系统缩放

能够经过<meta>设置系统缩放
影响布局视口和视觉视口

meta&viewport

此标签桌面浏览器不支持
推荐写法： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
- width [pixel_value|device-width]
  - 用于控制布局视口的大小， width=device-width 会使布局视口的大小编程理想视口的大小(即独立设备像素表明的大小)
  - 浏览器支持width的最大值为10000个像素，最小值为理想视口的20%
  - 设置具体数值大兼容性不佳，大部分的安卓手机不支持，仅有ios支持
  - 安卓的webkit不容许小于布局视口的宽度，若是指定了一个小于布局视口的值，它会默认转为布局视口的大小(一般为980)
  - ie10不容许超出480px的值，超出自动设置为布局视口的默认宽度1020px
  - 95%的浏览器都支持 width=device-width
- initial-scale
  - 初始缩放比例
  - 当用户旋转设备时，布局视口的宽度一般会发生改变，由于横竖屏时的理想视口尺寸不同，但ios的Safari的视口不会作出改变（基于性能的考虑）
  - ios的Safari在 inital-scale 设置的状况下，用户旋转设备，其布局视口会发生改变。但只设置 inital-scale ，ie10在旋转时会有问题，所以须要采用完美视口的写法
- user-scalable [no|yes] ：是否容许缩放，默认容许（ios10不支持该属性）
- minimum-scale：容许缩放的最小比例
- maximum-scale：容许缩放的最大比例
  - 没有经过meta标签设置 minimum-scale 和 maximum-scale 属性时，缩放比例为20%-500%
  - 有经过meta标签设置 minimum-scale 和 maximum-scale 属性时，缩放比例为10%-1000%
  - 安卓webkit不支持 minimum-scale 属性，其默认范围为25%-400%
  - ie minimum-scale 和 maximum-scale 属性都不支持
- target-densitydpi
  - dpi_value 70-400：每英寸像素点的个数
  - device-dpi：设置默认像素密度
  - high-dpi：高像素密度
  - medium-dpi：中等像素密度
  - low-dpi：低像素密度

移动端适配方案

rem适配原理：改变了一个元素在不一样设备上占据的css像素的个数
rem单位：根标签的font-size所表明的值，即根标签的fontsize = 1rem
rem适配优缺点
- 优势：没有破坏完美视口
- 缺点：px值到rem的转换太复杂
rem与em的区别
- em
  - 子元素字体大小的em是相对于父元素字体大小
  - 元素的width/height/padding/margin用em的话是相对于该元素的font-size
- rem
  - rem是所有的长度都相对于根元素，即<html>元素

示例

(function () {
      var layout = document.documentElement.clientWidth / 16;
      var styleNode = document.createElement('style'); // 建立style标签
      styleNode.innerHTML = "html{font-size : " + layout + "px!important"; // 将根标签的font-size置为布局视口的宽/16
      document.head.appendChild(styleNode); //将style标签添加到head中
})()

viewport适配

viewport适配原理
- 将全部设备布局视口的宽度调整为设计图的宽度
- 修改css像素与布局像素的比例，每个元素在不一样设备上占据的css像素的个数是同样的。可是css像素和物理像素的比例不相同
- 适配比例 = 理想视口宽度 / 设计图尺寸
viewport适配方案的优缺点
- 优势：所量即所得
- 缺点：不是完美视口
获取理想视口的宽度
- 方法一： screen.width ---- 兼容性差
- 方法二：一开始给HTML标签添加上<meta name="viewport" content="width=device-width"> 。此时，用document.documentElement.clientWidth获取理想视口的宽度

示例

(function () {
      var targetW = 640 // 设计图宽度
      var scale = document.documentElement.clientWidth / targetW // 理想视口的宽度 / 设计图宽
      var meta = document.querySelector("meta[name='viewport']")
      meta.content = 'initial-scale=' + scale + ',minimum-scale=' + scale + ',maximum-scale='+scale+',user-scalable=no'
})()

移动端一物理像素实现

rem+系统缩放

主体适配采用rem适配并放大rem的基值(dpr倍)
再经过系统缩放缩回dpr倍，initial-scale=1/dpr

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minmul-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1物理像素</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #test {
      width: 16rem;
      height: 1px;
      background-color: black;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div id="test"></div>

  <script>
    // rem 适配
    // 淘宝的作法，经过适配角度解决1物理像素的问题
    window.onload = function () {
      (function () {
        var dpr = window.devicePixelRatio || 1 // 像素比
        var layout = document.documentElement.clientWidth // 布局视口宽度

        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html { font-size:" + layout * dpr / 16 + "px!important}"
        document.head.appendChild(styleNode)

        var scale = 1 / dpr
        var meta = document.querySelector('meta[name="viewport"]')
        meta.content = "width=device-width, initial-scale=" + scale + ",user-scalable=no,maximum-scale=" + scale + ",minimum-scale=" + scale
      })()
    }
  </script>
</body>
</html>

响应式+变换缩放

经过媒体查询进行单个元素的缩放

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1物理像素</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #test {
      width: 100%;
      height: 1px;
      background-color: black;
      margin-top: 5rem;
    }

    @media only screen and (-webkit-device-pixel-ratio:2) {
      #test {
        transform: scaleY(0.5);
      }
    }

    @media only screen and (-webkit-device-pixel-ratio:3) {
      #test {
        transform: scaleY(0.33333);
      }
    }
  </style>
</head>

<body>
  <div id="test"></div>

  <script>
    (function () {
      var layout = document.documentElement.clientWidth / 16;
      var styleNode = document.createElement('style');
      styleNode.innerHTML = "html{font-size :" + layout + "px!important;}"
      document.head.appendChild(styleNode)
    })()
  </script>
</body>

</html>

移动端事件基础

触摸事件

移动端有两类事件：触摸事件、指针事件[←点击可查看MDN文档]
本篇暂时只提到触摸事件中的touchstart、touchmove以及touchend
touchmove与mousemove的区别
- touchmove：不可能单独触发
- mousemove：能够单独触发
须要注意的是：touchstart、touchmove以及touchend最好不要用DOM1的事件绑定 item.ontouchstart = function(){} ，缘由在于DOM1的绑定方式在chrome早期版本（56及如下）没法触发，这就给调试带来了困难
建议采用DOM2的方式绑定touchstart、touchmove以及touchend事件： addEventListener()

禁止移动端事件默认行为

须要全面禁止的系统默认行为有：
- 下拉橡皮泥（阻尼）效果
- 长按选中文字效果

示例

// 下面这行代码能够禁止手机浏览器全部的默认事件 
      document.addEventListener("touchstart", function (ev){
        ev = ev || window.event
        // ev.cancelable 可用于查看是否能取消该事件的浏览器默认行为
        item.innerHTML = ev.cancelable;
        ev.preventDefault()
})

移动端初始模板

移动端必备条件
- meta标签
- 全面阻止事件的默认行为
  - 全面阻止事件的默认行为，有一些设备会有页面上全部的滚动条失效的隐患(可使用自定义滚动条)
- 适配方案

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    window.onload = function () {

      // 阻止默认行为
      document.addEventListener('touchstart', function (ev) {
        ev = ev || window.event
        ev.preventDefault()
      })

      // rem适配方案
      !(function (flag) {
        var w = document.documentElement.clientWidth
        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html{font-size: " + w / flag + "px!important}"
        document.head.appendChild(styleNode)
      })(16)
    }  
  </script>
</body>

</html>

事件穿透

事件穿透产生的缘由
- pc端的事件能够在移动端触发
- pc端事件有300毫秒延迟
- 移动端事件不会有延迟

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      line-height: 0;
    }

    .wrapper {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
    }

    a {
      font-size: 12px;
      line-height: 18px;
    }
  </style>
</head>

<body>
  <div class="wrapper"></div>
  <a href="http://www.baidu.com">百度一下</a>

  <script>
    window.onload = function () {
      // 阻止默认行为
      document.addEventListener('touchstart', function (ev) {
        ev = ev || window.event
        ev.preventDefault()
      })

      // rem适配方案
      !(function (flag) {
        var w = document.documentElement.clientWidth
        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html{font-size: " + w / flag + "px!important}"
        document.head.appendChild(styleNode)
      })(16)

      var wrapper = document.querySelector('.wrapper')
     
      wrapper.addEventListener('click', function () {
        wrapper.style.display = "none"
      })

      // 全面禁止事件默认行为会致使手机端a标签没法跳转
      //  移动端a标签跳转方案，解决误触
      var aNodes = document.querySelectorAll("a")
      for (var i = 0; i < aNodes.length; i++) {
        // 该写法使滑动的时候页面不发生跳转
        aNodes[i].addEventListener('touchstart', function () {
          this.isMove = false;
        })

        aNodes[i].addEventListener('touchmove', function () {
          this.isMove = true;
        })

        aNodes[i].addEventListener('touchend', function () {
          if (!this.isMove) {
            window.location = this.href
          }
        })
      }
    }  
  </script>
</body>

</html>

TouchEvent

touchEvent.changedTouches

触发事件时改变的触摸点的集合
能够经过clientX和clientY属性来获取当前集合中手指在视口中的坐标的坐标
- touchEvent.changedTouches[0].clientX; // 获取当前集合中第一根手指的横坐标

touchEvent.targetTouches

绑定事件的那个结点上的触摸点的集合列表

touchEvent.touches

触发事件时改变的触摸点的集合

移动端常见问题

禁止电话与邮箱

iPhone上的Safari和某些webkit android手机浏览器，会自动对看起来像是电话号码的数字串（包括已经加入连字符或括号格式化过的）和邮箱添加连接，致使用户点击该数字后跳转到拨打电话的界面
能够经过使用meta标签来禁止掉电话及邮箱的跳转 <meta name="format-detection" content="telephone=no,email=no">
当禁止电话及邮箱跳转后若是想让用户点击电话或邮箱跳转能够将其写成以下格式
- ```
<a href="tel:110">13579246801</a>
<a href="mailto:123@qq.com">123@qq.com</a>
```

连接高亮

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 解决连接高亮问题 */
}

圆角过圆

input {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    -webkit-appearance: none; /* iphone 只要有 border-radius 属性就会变成一个圆  */
}

Font Boosting

Font Boosting被称为字体提高，也被称为Text Autosizer，Font Inflation.是 Webkit 给移动端浏览器提供的一个特性：当咱们在手机上浏览网页时，极可能由于原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不须要左右滑动屏幕，也不须要双击放大屏幕内容的前提下，也可让人们方便的阅读页面中的文本。
解决方法一：给元素指定宽高
解决方法二：给元素指定max-height p { max-height: 9999px; }

补充

Web App、Native App、hybrid app

web App：即web前端页面，多采用h5开发
- 不须要安装包，节约手机空间
- 量级轻，开发成本低
- 版本迭代快
- 基于浏览器，能够跨平台使用
- 安全性相对较低，页面跳转费力，不稳定感更强。
native app：又称原生app，基于智能手机本地操做系统android(安卓基于Java) 、ios(基于OC --- Object-C)编写运行的第三方应用程序。
- 性能更好
- 版本迭代须要用户从新打包补丁
- 开发成本高。
- 发布新版本慢，应用商店发布审核周期长，下载由用户控制
hybrid app：即混合app， native app 与 web app的混合。

移动价值链

网络运营商
- 中国移动
- 中国联通
- 中国电信
设备供应商
- 华为
- 小米
- 魅族
- oppo
- vivo
- 苹果
- ...
软件制造商（操做系统）
- 谷歌
- 苹果
- ...
服务提供商
- 谷歌
- 华为
- 小米
- ...

移动端浏览器分类

移动端大概有30多种浏览器，其中20多种处于边缘化状态

内置浏览器

每部手机都有内置浏览器，这个浏览器属于设备的固件，一般由操做系统厂商开发，并且大多数内置浏览器都被紧密的集成到了底层的操做系统中去了，所以咱们没有办法单独升级内置浏览器，只能借助于更新操做系统。总的来讲，它的特色以下：
- 更新慢
- 移植在操做系统中
安卓
- 三星 --- 三星webkit
- 中兴 --- 中兴webkit
- 华为 --- 华为webkit
- 小米 --- 小米webkit
- 索尼 --- 索尼webkit
ios --- safari
黑莓 --- 黑莓webkit
window phone --- IE

可下载浏览器

在实践中，只有安卓才有可下载浏器(uc、猎豹、qq浏览器等)
可下载浏览器更新快
可下载浏览器独立于操做系统

webview

webview是独立程序，是留给原生应用的一个操做系统浏览接口，它用了内置浏览器不少底层的组件（好比渲染引擎）
ios的操做系统默认不容许在它身上有多余的渲染引擎，所以其余浏览器想在ios上运行就必须使用ios的webview

代理浏览器(较少)

代理浏览器的渲染引擎存在于服务端，所以其js性能及其低下
代理浏览器的渲染引擎可以解析和执行 HTML、CSS、Javascript,但并非运行在设备上，而是在远程服务器上，与代理浏览器相对应的叫完备浏览器
- 完备浏览器
  - 它与咱们预期的浏览器的运行方式同样，当用户请求一个页面时，浏览器就会经过http请求去抓取HTML CSS Javascript 和其余资源，一旦一切就绪，就会去渲染和显示页面，全部的步骤都是在客户端进行的，会占用内存，处理器的事件，电池寿命
- 混合浏览器
  - 能够在代理浏览器和完备浏览器间切换的浏览器称为混合浏览器(opera-mini、uc-mini)
代理浏览器工做流程
- 用户请求一个页面，他不会发送一个普通的http请求，而是发送一个特殊的加密连接到一个特殊的代理服务器
- 代理服务器会发送正常的http请求给用户但愿访问的web服务器
- 代理服务器包含一个渲染引擎，可以正常渲染页面
- 代理服务器压缩页面，压缩页面后的文件相似于PDF，它有连接热点
- 代理服务器一样经过加密连接把这个文件发到客户端
- 客户端展现