H5-深度解析

3次阅读

共计 4623 个字符，预计需要花费 12 分钟才能阅读完成。

先科普一下，HTML5 并不是一项技术，而是一个标准。
所以其实要么我们是作为理论派讨论 HTML5 标准，要么是作为实践派讨论 HTML5 标准在某浏览器的应用。
H5 实际上是一个解决方案，一个看起来酷炫的移动端 onepage 网站的解决方案

rem 适配
优点：

    1. 引用简单，布局简便
    2. 根据设备屏幕的 DPR, 自动设置最合适的高清缩放
    3. 有效解决移动端真实 1px 问题

但是绝不是每个地方都要用 rem，rem 只适用于固定尺寸！

在这里 rem 也是一种单位，并且可以为咱们的布局提供无线的变化，根据开发者的设定，它将会在不同的分辨率屏幕上展示不同的色彩。

这个单位的定义和 em 类似，不同的是 em 是相对于父元素，而 rem 是相对于根元素<html>，当我们指定一个元素的 font-size 为 2rem 的时候，也就说这个元素的字体大小为根元素 <html> 字体大小的两倍，如果 html 的 font-size 为 12px，那么这个 2rem 的元素 font-size 就是 24px。

    html {font-size: 12px;}
    h1 {font-size: 2rem;} 2*12 = 24px

    html {font-size: 16px;}
    h1 {font-size: 2rem;} 2*16 = 32px

单位	定义	特点
rem	font size of the root element	以根元素字体大小为基准
em	font size of the element	以父元素字体大小为基准

当然上边只是我们介绍 rem 简单的示例，具体运用到项目中我还需进行 rem 的计算，根据根元素的 font-size 通过 Javascript 来计算我们的 rem 单位适配

选取一个设备宽度作为基准，设置其根元素大小，其他设备根据此比例计算其根元素大小。比如使得 iPhone6 根元素 font-size=16px。

设备	设备宽度	根元素 font-size/px	宽度 /rem
iPhone5	320	计算	–
iPhone6	375	16	23.4375
iPhone7	375	16	23.4375
iPhone7plus	414	计算	–

根元素 fontSize 公式：width/fontSize = deviceWidth/deviceFontSize

下方为动态计算
  (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
    console.log(rem)
    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))

上方的代码则是本人经常使用的 rem 计算方法，我们可以根据我们自己的需求设定基于多大的屏幕以及 rem 的换算倍率等

使用百分比布局大部分是可行的，它会让布局随着屏幕的大小自动缩放，而且不用写太多的 css 样式，以及 js 相关的计算操作，但是文字就存在非常大的问题了，由于文字是固定大小，在屏幕 dpr 变化的时候，文字的 CSS 像素不变，就导致了文字在页面中的占位发生了变化。这样的结果就是，文字过多或者屏幕 dpr 过小的时候，会发生溢出；但是如果按照小屏幕为基准，又会发生字体太小这种情况。
百分比在当前移动端适配排版的时候，更多地会作为 section 级别元素的兼容排版。这个也要和设计稿中的效果相关，如果设计稿中要求一个元素定宽，那么就直接用 px 来保证宽度就可以了。

vw也是 css 的单位，1vw 相当于 1%，比如：浏览器视口尺寸为 370px, 那么 1vw = 370px * 1% =6.5px(浏览器会四舍五入向下取 7)，
我们来看看 vw 的浏览器和手机的兼容性问题
浏览器

手机

在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持
vw 自身将整个可见视口横向分成了 100 份，每一个单位就是 1vw，这个单位最大的优势就是在移动端的时候，无论是竖屏或者横屏，vw 永远都是针对于横向的，比 rem 的方案好在当屏幕大小发生变化（顺便兼容了以后的可调节屏幕大小的移动设备[手动斜眼]）的时候，不会让页面崩掉。
对于移动设备来说，比如 iphone6+ 的 375pxCSS 像素宽度，1vw 就等于 3.75px，通过这个单位可以解决上面的依赖于脚本绑定根元素 font-size 的问题，在竖屏和横屏下面都有比较好的效果

$w-base: 375px
$w-base-design: 750px
@function px2vw($px)
    @return ($px / $w-base-design) * 100vw

虽然 vw 可以得到很好的支持，但是不会得到视觉稿原本的像素值了。在后期进行维护的时候会增加很多很多很多麻烦，前期打怪爽，后期装备维护难

淘宝

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

1px 问题

   大家都知道我们再写 web 端适配的时候还需要兼容 ie 浏览器，这是因为浏览器的内核都不一样，而且我们的屏幕大小，屏幕厂商也是不一样，时常会发生缺少像素或者多像素现象，其实手机也一样屏幕大小不一，浏览器也是各式各样，拿 iphone6 为例，其 dpr(device pixel ratio)设备像素比为 2，css 中一个 1x1 的点，其实在 iphone6 上是 2x2 的点, 并且 1px 的边框在 devicePixelRatio = 2 的 Retina 屏下会显示成 2px，在 iPhone6 Plus 下甚至会显示成 3px。

这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。
使用 postcss-write-svg 插件

利用 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. 在 web app 应用下状态条（屏幕顶部条）的颜色 (iphone 设备中的 safari 私有 meta 标签)<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）若值为“black-translucent”将会占据页面 px 位置，浮在页面上方

4. 允许全屏模式浏览 (iphone 设备中的 safari 私有 meta 标签)<meta content=”yes” name=”apple-mobile-web-app-capable”>

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

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

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

8. 移动端字体单位 font-size 选择 px 还是 rem (new)

9. 移动端 touch 事件(区分 webkit 和 winphone) (new)

更多问题

响应式：设计通过 CSS3 的 MQ（Media queries），使网页在不同设备上都可以自动适应，从而具有更加优秀的表现效果。而且响应式设计不仅用在移动网站，在 PC 端也有不同屏幕的适配，而且移动端和 PC 端可以只使用一套代码，这就是全平台的响应式设计
Webapp：HTML5 移动端（移动网站、混合应用、WebAPP）为了解决屏幕适配经常会使用响应式设计（流式布局、CSS3 媒体查询），但是响应式设计并不是必须，也可以使用流式布局和 remnant 来解决移动端的屏幕适配问题

META 标签，是在 HTML 网页源代码中一个重要的 html 标签。META 标签用来描述一个 HTML 网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等

作用

META 标签是 HTML 标记 HEAD 区的一个关键标签，它位于 HTML 文档的 <head> 和 <title> 之间（有些也不是在 <head> 和 <title> 之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta> 除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定