H5深度剖析

前言：

   当代是手机市场的时代，所以手机端的需求比较大。在各大招聘网站上的公司，对前端人员的技术要求大多都有移动端H5开发。所以学习移动端H5开发对于一个前端开发人员来说是十分重要的。

先说几个概念：

1、物理像素（设备像素）

屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了，且固定不变的。

2、设备独立像素

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

3、设备像素比

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系

设备像素比 ＝ 物理像素 / 设备独立像素
以iphone6为例：
iphone6的设备宽和高为375pt * 667pt，可以理解为设备的独立像素，而其设备像素比为2.固有设备像素为750pt * 1334pt

以上是概念，现在来解释一下具体是什么：

  物理像素就是你屏幕上的像素点，可以把他理解成一个很小很小的小灯泡，你的电脑显示屏就是特别特别多的小灯泡排列而成的，在页面显示的时候每一个小灯泡都显示着各自的颜色，所有的小灯泡加起来就形成了你看到的画面。那么dpr呢？其实也很简单，在我们的电脑屏幕上1物理像素等于1px，也就是一个小灯泡等于1px,但是移动端1物理像素不一定等于1px,因为在移动端对画面的要求比较高，要求画面要更细腻，此时如果在一个dpr=2的手机上设置一个元素的长度是1px，那么他的真实长度是2物理像素，及两个小灯泡。(此处本人如此理解，如果有误大家可以指出。)

正文：

 有了以上概念的基础我们可以进入正式的H5深度剖析了

一：meta 标签讲解

在以前移动手机并不普遍的时候，如果你在手机上打开一个电脑上的网页，你会发现你所看到的是一个缩小版的电脑网页，他显示的很全，但只是缩小了而已，这样虽然能适应以前的手机端，但是随着社会的发展，“用户体验”这个词开始出现，所以传统的方案就无法生效了，我们所需要的是一个在手机上完美显示的网页。网页的宽度就是手机的宽度，在这里就需要设置meta标签了：

<meta name="viewport" content="width=device-width">

上面的意思就是：视觉视口 = 屏幕宽度 （这里有设计到布局视口，视觉视口和理想视口的概念，这里就不进行讲解了，太多了，有兴趣的可以去了解一下）

meta的其他属性含义：

• name="viewport" :视口
• width=device-width ：屏幕的宽度=设备的宽度
• user-scalable=no ：是否允许用于缩放
• initial-scale=1.0 ：初始缩放值1:1
• maximum-scale=1.0 ：最大的缩放值1:1
• minimum-scale=1.0" : 最小的缩放值1:1

下面附上移动端meta的基本配置：

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

 

二：移动端适配方案

     我们都知道不同于pc端的开发，移动端开发并不用去适配浏览器，因为移动端手机浏览器的内核几乎都是Google的内核，而且Google不像某些浏览器（看谁呢！说的就是你，ie），并没有很多坑，所以你完全不用去考虑浏览器的兼容问题。开心不！but！你要去适配各种手机不同大小的屏幕，要保证无论在大到ipad，小到iphone4s，都要保证他的样式不跑，都完美的显示(用户体验比天高)。试想如果一张图片,要在一个500px和一个1000px的布局上都铺满宽度怎么办？很简单，设置成100%就可以了。没错移动端的适配就是采用的这种思想，无论屏幕大小如何变化，其元素在这个屏幕大小下所占有的百分比是不会发生变化的。

    此处我们采用的是淘宝的适配方案，也就是rem。淘宝官方提供了一个计算rem也就是百分比的js脚本供我们使用，这个脚本会每次通过获取你屏幕的宽度帮你算出1rem及1%宽度，这时我们只需要采用把原来的px换成百分比就行了。最近还出了一个vw的适配方案，不过自己没了解，以后学习之后在加上。

下面附上rem脚本的一个github地址，有需要的童鞋可以去看一看：

  https://github.com/chengjs/rem

在附上flexible.js的源码：

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

 

三：移动端事件

在移动端，我们传统的电脑端的事件有些是不太好用的，毕竟移动端可没有鼠标，所以一些事件是不太一样的，这里附上移动端的一些常用事件：

tap: 手指碰一下屏幕会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipe：手指在屏幕上滑动时会触发
click：单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
swipeDown：手指在屏幕上向下滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
longTap: 手指长按屏幕会触发
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
swipeRight：手指在屏幕上向右滑动时会触发

 

四：移动端常见问题

1：利用meta标签对viewport进行控制（这个必须加，不然在电脑上没问题的布局到手机端就会出现问题）：

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

2.删除默认的苹果工具栏和菜单栏：

<meta name="apple-mobile-web-app-capable" content="yes">

3.禁止了把数字转化为拨号链接：

<meta name="format-detection" content="telephone=no"> 在iPhone上默认将电话号码变为超链接（蓝色字体）并且点击这个数字还会自动拨号

4.ios click点击事件延时300ms

5.移动端如何定义字体font-family

更多问题

 

五：响应式与自适应的区别

 关于自适应和响应式我翘来一张图，我觉得很清楚明了：

 说白了响应式就是在不同屏幕下显示不同的网页布局，以此来适应不同的屏幕大小。说到响应式就不得不说一个框架了（其实并不能说是一个框架，相当于一个库），那就是BootStrap。我觉得除了像淘宝京东这样的一些大厂以为，其他大部分的响应式页面应该都是通过BootStrap去实现的，具体感兴趣的童鞋可以去了解一下。

 那么响应式布局的原理到底是什么呢！是媒体查询：@media。通过@media我们去写几套css样式去供不同的屏幕使用，手机端使用手机端的样式，电脑端显示电脑端的样式，平板上显示平板上的样式。

自适应就明了多了，就是只有一个布局，只写一套样式，但是这套样式和布局在不同屏幕大小下都显示的十分好，并且不会跑偏。我们上面所说的rem的适配方案就属于自适应。

 

总结：以上就是我所理解的移动端的H5了，以后如果有新的理解会进行补充，如果哪里写的不对的话，希望大家能够指出，感谢。