乐趣区

H5-深度解析

先科普一下,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 方案

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:手指在屏幕上向右滑动时会触发

移动端常见问题

  1. 1px 问题

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

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

  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. 在 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)

更多问题

webApp 与响应式区别

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

meta 标签

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

作用

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

参考
手机端页面自适应解决方案—rem 布局进阶版
移动端 Web 页面适配方案
vh,vw 单位你知道多少?

退出移动版