H5踩坑系列（一）

提到移动端适配，首先内心可能会问，咱们为何要作移动端的适配，怎么去作移动端端的适配

咱们为何要进行移动端的适配

首先一个页面在pc上边打开，是正常显示的，可是咱们用手机打开的时候，因为手机的屏幕尺寸并不能完整的吧页面所有显示出来，就算是手动进行缩放也会出现好比说滚动条，页面布局错乱等等各类五花八门的问题，对于用户的体验很是的很差

因而乎就有了移动端的适配，
移动端适配的目的是在不一样尺寸的设备上，页面达到合理的展现（自适应）或者说是可以保持统一效果。

在咱们了解移动端适配以前 咱们首先要先了解一下viewport的基本概念

viewport的概念

viewport在pc端是指视窗、视口，浏览器上用来显示网页的那部分区域。

移动端则有三个不一样的视口概念

• 布局视口
• 视觉视口
• 理想视口

布局视口：就是在浏览器窗口css的布局区域，通常都会比移动端窗口大不少。

视觉视口：用户经过屏幕看到的页面区域，说白了就是手机屏幕看到的那一块

还有最后一个理想窗口，下边是从别处摘下来的一句话

理想视口：通常来说，这个视口其实不是真是存在的，它对设备来讲是一个最理想布局视口尺寸，在用户不进行手动缩放的状况下，能够将页面理想地展现。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

实现这个理想窗口须要在html里边加上一个标签

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

这个标签相比你们都不会陌生，确定之前都用过
那么这个meat标签他究竟是起到了什么样的做用呢

meta标签

meta经常使用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

meta标签的主要属性有两个

• http-equiv
• name
• 还有一些简单明了的 好比说charset
• content 和上边两个关联的

http-equiv 这个属性有点定义http参数的意
他的经常使用参数简单说明以下

• content-Type(设定网页字符集)

• refresh(自动刷新并指向某页面)

• Set-Cookie(cookie设定)

• expires(网页到期时间 这个须要到服务器从新上传)

上边那个属性...说实话用的不是不少，有的一些参数甚至是前几天才看到的，
name里边的参数就用的比较多了，
一样先介绍一下name属性里边的参数

• 首先keywords(关键字)，这个属性对于seo来讲可谓是事关重要，固然也存在争议，有人说如今搜索引擎已经不太在乎这个标签了，可是我我的作了这么久的seo，不加这个标签总感受少了一些什么

• description(网站内容的描述)，网站的描述，这个标签在我眼里和keywords 还有title一个等级，被我当成是网站不可缺乏的三个标签，毕竟站长工具神马的都会有显示，我不相信他没用

• robots(定义搜索引擎爬虫的索引方式)，这个能够告诉爬虫 哪些页面不须要抓取，通常来说，我会把一些简介性的页面设置nofollow，避免权重分散

• author(做者)

• copyright(版权)

• viewport(移动端的窗口)，这个是今天主要要说的一个参数

• 还有其余的一些巴拉巴拉的，

viewport的属性

• width 设置布局视口 的宽度，为一个正整数，或字符串"width-device"，这个字符串表示设备的屏幕宽

• initial-scale 设置页面的初始缩放值，为一个数字，能够带小数

• minimum-scale 容许用户的最小缩放值，为一个数字，能够带小数

• maximum-scale 容许用户的最大缩放值，为一个数字，能够带小数

• height 设置布局视口 的高度，通常来说高度不会固定

• user-scalable 是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

移动端适配方案

在平常开发中因为手机屏幕尺寸不同，分辨率不同，真的是多姿多彩（千奇百怪）

• css3媒体查询 （响应式）

  根据不一样的分辨率去更改样式，这种方法在我刚接触前端的时候我用过，恕我直言这种方法真的是贼酸（dan）爽（teng）
  他大概是长成这个样子的

  @media screen and (max-width: 320px){
    ....
    }
    @media screen and (max-width: 375px){
         ....
    }
    @media screen and (max-width: 414px){
        ....
    }

可是后来我发现一个问题，我不可能把全部的宽都写进去，并且代码多的时候巨难维护

我记得我当时大概写了这么多的样式

我甚至一度想放弃作移动端...

• 百分比布局

  这个布局我以前也写过，适配却是不错，没有媒体查询那么麻烦，可是每一个元素的宽高都要计算，，百分比后边的小数算到好几位也是常常地事...（原谅我是个小白）

  须要补充说明的是margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关

• rem方案

  这个是我比较喜欢的，rem是一个只相对于浏览器的根元素（HTML元素）的font-size的来肯定的单位

  补充一点em和rem的区别
  em若是自己有font-size的话，会根据自身的font-size肯定，自己没有的话是根据父元素的font-size来肯定的
  可是最后他们都会转换成px这个单位

  只要改变根元素的font-size的值，以rem为固定单位的元素大小也会发生响应式的改变，可是须要注意的是，

  控制font-size的js代码必须放在在页面第一次加载完成以前，而且放在引入 的css样式代码以前。

  //onresize 能够监听到视口的变化
  //方便动态的更改font-size
  window.onresize = resize;

  function resize()
  {
  alert("检测到resize事件!");
  }

• vm、vh 方案

  这个vm vh 是相对于屏幕的宽高去计算的 100vm表示全屏款
  100vh表示全屏高 可是兼容性不是太好，有时候并不能达到理想的效果，我记得有一次我使用了一次100vh 结果发现个人手机（安卓）并不能沾满

响应式与自适应的区别

响应式网页设计（英语：Responsive web design，一般缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术作法，该设计可以使网站在不一样的设备（从桌面计算机显示器到移动电话或其余移动产品设备）上浏览时对应不一样分辨率皆有适合的呈现，减小用户进行缩放、平移和滚动等操做行为。 对于网站设计师和前端工程师来讲，有别于过去须要针对各类设备进行不一样的设计，使用此种设计方式将更易于维护网页。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出 采用 RWD 设计的网站使用CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格[9]和自适应大小的图像以适应不一样大小的设备：(百科全书)

这个问题...我以为放一张图自行体会吧

我我的认为响应式能够不用js纯css就能实现，
自适应须要一点点js来支撑

另外我觉的自适应是包含响应式的，好比说博客园，F12能够看下，这里有对响应式与自适应理解不当的地方，欢迎指出

移动端的事件

• touch事件

  • touchstart：手指放在一个DOM元素上。

  • touchmove：手指拖曳一个DOM元素。

  • touchend：手指从一个DOM元素上移开。

    //伪装上边有个canvas
     window.onload = function startup() {
      var el = document.getElementsByTagName("canvas")[0];
      el.addEventListener("touchstart", handleStart, false);
      el.addEventListener("touchend", handleEnd, false);
      el.addEventListener("touchmove", handleMove, false);
      log("初始化成功。")
    }

以前咱们经常使用的事件
mousedown，mouseup、click等等都是在这个touch事件以后才会触发的

移动端常见问题

这个问题我简单说说我以前踩过的一个大坑，就是H5软键盘的问题

//fixed定位
    //1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
    //2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
    //3.ios4下不支持position:fixed
    //解决方案：使用Iscroll，如：
    <div id="wrapper">
    <ul>
    <li></li>
    .....
    </ul>
    </div>
    <script src="iscroll.js"></script>
    <script>
    var myscroll;
    function loaded(){
    myscroll=new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
    </script>
    //position定位
    //Android下弹出软键盘弹出时，影响absolute元素定位
    //解决方案:
    var ua = navigator.userAgent.indexOf('Android');
    if(ua>-1){
    $('.ipt').on('focus', function(){
    $('.css').css({'visibility':'hidden'})
    }).on('blur', function(){
    $('.css').css({'visibility':'visible'})
    })
    }

• 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差别，事件不一样。

• 在IOS 上，输入框获取焦点，键盘弹起，页面（webview）总体往上滚动，当键盘收起后，不回到原位，致使键盘原来所在位置是空白的。

• 在 IOS 上，使用第三方输入法，高度计算存在误差，致使在有些输入法弹起，将输入框挡住一部分。

就这么一个软键盘 记得我当时弄了一个晚上，越着急越弄很差，越弄很差越着急...

ios的软键盘弹起的时候是整个页面网上滚的，scrollTop发生变化的高度就是软键盘的高度，可是在软键盘收起的时候这段距离并不会收回

Android 上，软键盘被弹起的时候，整个页面会被压缩，准确的来讲是视图会被压缩，以前高度减去弹起后的高度是软键盘的高度

而且在点击软键盘的收起的时候 软键盘的input不会失去焦点

因此总结以下
在 IOS 上，能够监听 聚焦和失焦事件来判断键盘的状态
在 Android 上，监听 页面高度变化能够判断键盘的状态

还记得当时是第一次写移动端的页，碰到这个软键盘的问题真的是把我折磨的生无可恋，但愿对你们有帮助。

以上是我对H5的一些认知，有不对的地方，欢迎指出