无线web开发经验（5）—— 开发技巧（Tips）

点击与click事件

• 对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
  在移动浏览器中对触摸事件的响应顺序应当是：

ontouchstart -> ontouchmove -> ontouchend -> onclick

因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。

• 使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。

• body{ -webkit-overflow-scrolling: touch;}

用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧？不过如果是一个div，然后设置 height:200px;overflow:auto;
的话，可以滚动但是完全没有那滑动效果，很郁闷吧？

我看到很多网站为了实现这一效果，用了第三方类库，最常用的是iscroll（包括新浪手机页，百度等） 我一开始也使用，不过自从用了-webkit-overflow-scrolling: touch;
样式后，就完全可以抛弃第三方类库了，把它加在body{}区域，所有的overflow需要滚动的都可以生效了。

锁定 viewport

ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。

利用 Media Query监听

Media Query 相信大部分人已经使用过了。其实 JavaScript可以配合 Media Query这么用：

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql) { 
    if (mql.matches) { 
        alert('The device is currently in portrait orientation ') 
    } else { 
        alert('The device is currently in landscape orientation')
    }
}

借助了 Media Query 接口做的事件监听，所以很强大！
也可以通过获取 CSS 值来使用 Media Query 判断设备情况，详情请看：JavaScript 依据 CSS Media Queries 判断设备的方法。

rem最佳实践

rem是非常好用的一个属性，可以根据html来设定基准值，而且兼容性也很不错。不过有的时候还是需要对一些莫名其妙的浏览器优雅降级。以下是两个实践

• http://jsbin.com/vaqexuge/4/edit 这有个demo，发现chrome当font-size小于12时，rem会按照12来计算。因此设置基准值要考虑这一点

• 可以用以下的代码片段保证在低端浏览器下也不会出问题

    html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; } /* =14px */
    h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  

当前点击元素样式：

-webkit-tap-highlight-color: 颜色

检测判断 访问终端

  var browser={
      versions:function(){
          var u = navigator.userAgent, app = navigator.appVersion;
          return {
              trident: u.indexOf('Trident') > -1, //IE内核
              presto: u.indexOf('Presto') > -1, //opera内核
              webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
              gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
              mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
              android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
              iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
              iPad: u.indexOf('iPad') > -1, //是否iPad
              webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
              weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
              qq: u.match(/\sQQ/i) == " qq" //是否QQ
          };
      }(),
      language:(navigator.browserLanguage || navigator.language).toLowerCase()
  }
  //根据实际需求判断终端及浏览器，进行个性化适配和操作
  if(browser.versions.mobile){
    window.location.href="mobile.html"
  }

阻止屏幕旋转时字体自动调整

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

模拟:hover伪类

因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
    myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
    myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

引导用户安装并打开app(From阳阳)

• Android：
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = 'qyfeixin://resources/wakeup';
  setTimeout(function () {
  document.body.appendChild(iframe);
  }, 1000);

• iOS:
  window.location.href="https://itunes.apple.com/us/app/xxxxxxxxxxxxxxx";

消除transition闪屏

两个方法：使用css3动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

测试是否支持svg图片

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")

“隐私模式”

参考地址：http://blog.youyo.name/archives/smarty-phones-webapp-deverlop-advance.html

ios的safari提供一种“隐私模式”，如果你的webapp考虑兼容这个模式，那么在使用html5的本地存储的一种————localStorage时，可能因为“隐私模式”下没有权限读写localstorge而使代码抛出错误，导致后续的js代码都无法运行了。

既然在safari的“隐私模式”下，没有调用localStorage的权限，首先想到的是先判断是否支持localStorage，代码如下：

if('localStorage' in window){ 
    //需要使用localStorage的代码写在这
}else{
     //不支持的提示和向下兼容代码
}

测试发现，即使在safari的“隐私模式”下，’localStorage’ in window的返回值依然为true，也就是说，if代码块内部的代码依然会运行，问题没有得到解决。 接下来只能相当使用try catch了，虽然这是一个不太推荐被使用的方法，使用try catch捕获错误，使后续的js代码可以继续运行，代码如下：

try{
     if('localStorage' in window){ 
        //需要使用localStorage的代码写在这 
    }else{
        //不支持的提示和向下兼容代码 
    }
}catch(e){
     // 隐私模式相关提示代码和不支持的提示和向下兼容代码
}

所以，提醒大家注意，在需要兼容ios的safari的“隐私模式”的情况下，本地存储相关的代码需要使用try catch包裹并降级兼容。

localStorage:

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   // 如果名称是  n 的数据存在 ，则将其读出 ，赋予变量  v  。
localStorage.setItem('n', v);     // 写入名称为 n、值为  v  的数据
localStorage.removeItem('n');        // 删除名称为  n  的数据

使用特殊链接：

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

打电话给我
发短信

或用于单元格：

自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

不让 Android 识别邮箱

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

禁止用户选中文字

-webkit-user-select:none

音频跟视频

系统默认情况下 audio的autoplay属性是无法生效的，这也是手机为节省用户流量做的考虑。 如果必须要自动播放，有两种方式可以解决。

1.捕捉一次用户输入后，让音频加载，下次即可播放。

//play and pause it once
document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

这种方法需要捕获一次用户的点击事件来促使音频跟视频加载。当加载后，你就可以用javascript控制音频的播放了，如调用audio.play()

2.利用iframe加载资源

var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);

这种方式其实跟第一种原理是一样的。当资源加载了你就可以控制播放了，但是这里使用iframe来加载，相当于直接触发资源加载。 注意，使用创建audio标签并让其加载的方式是不可行的。 慎用这种方法，会对用户造成很糟糕的影响。。

Iphone的媒体查询

@media (device-height : 480px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone4/4s */
  body,html {
    font-size:9px !important;
  }
  .panel-center img{
    width:100px !important;
  }
}
@media (device-height : 568px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone5 */
 body,html {
    font-size:9px !important;
 }
 .panel-center img{
    width:100px !important;
  }
}
@media (device-height : 667px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone6 */
  body,html {
     font-size:12px !important;
  }
}    
@media (device-height : 736px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone6 Plus */
 body,html {
    font-size:14px !important;
  }
  .panel-center img{
    width:130px !important;
  }  
}

媒体查询，响应不同启动图片

拍照上传

分别调用手机拍照、摄像、录音功能。
PS：该属性存在浏览器兼容性问题，不是所有的浏览器都支持。亲测ios safari可用。