移动端开发技巧汇总

发表于 | 分类于 | 评论数： | 阅读次数：

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上

基本模板

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="apple-mobile-web-app-title" content="标题">
	<meta name="format-detection" content="telphone=no, email=no" />
	<title>title</title>
</head>
<body>
	...
</body>
</html>

文档声明

<!DOCTYPE html>

声明文档类型，并向下兼容，大小写不敏感，没有结束标签，必须位于文档第一行，html标签之前

字符编码

<meta charset="utf-8" />

启用IOS下 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="标题">
<meta name="apple-touch-fullscreen" content="yes">

当网站添加到主屏后，再点击打开时，可隐藏地址栏，全屏显示，顶部状态栏背景显示黑色（默认白色，可以定义 black/black-translucent半透明）

关闭IOS下 电话号码和邮件自动识别功能

<meta name="format-detection" content="telphone=no, email=no" />
//页面中开启电话、短信、发送邮件功能
<a href="tel:12323423">致电：12323423</a>
<a href="sms:12323423">发送信息至：12323423</a>
<a href="mailto:test@qq.com">发送邮件至：test@qq.com?subject=message&body=hello</a>

字体设置

html,body {font-family:sans-serif}

各个手机系统有自己的默认字体，且都不支持微软雅黑 如无特殊需求，手机端无需定义中文字体，使用系统默认

关闭IOS横屏自动调整字体大小功能

html {-webkit-text-size-adjust:100%;}

取消ios下输入英文首字母大写功能

<input autocapitalize="off" autocorrect="off">

android去掉语音输入按钮

input::-webkit-input-speech-button {display:none;}

去掉点击时默认的边框和背景

html * { outline:0; -webkit-tap-highlight-color:rgab(0,0,0,0); }

去掉表单输入框内阴影

input,textarea { border:0; }
或者
input,textarea { -webkit-appearance:none; }

使用原生滚动

.wrap { overflow:auto; -webkit-overflow-scrolling:touch; }

禁止选中内容

.wrap { -webkit-user-select: none; }

禁止保存或拷贝图像（IOS）

img { -webkit-touch-callout: none; }

模拟hover效果

<style type="text/css">
	.btn {height: 50px; background-color: #eee; }
	.btn:active {background-color: #35333;}
</style>
<body ontouchstart="">
	<div class="btn"></div>
</body>

兼容性ios5+、部分android 4+

audio和video在IOS和andriod中无法自动播放

$('html').one('touchstart', function(){ audio.play(); });

强制css3硬件加速

.wrap { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }

消除transition闪屏

.wrap {-webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; }

可以解决元素在做动画时，元素中文字变虚的问题

横竖屏检测

window.orientation 90/-90为横屏，0/180为竖屏

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

媒体查询检测

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

手机拍照和上传

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
  • ios 有拍照、录像、选取本地图片功能
  • 部分android只有选取本地图片功能
  • winphone不支持
  • input控件默认外观丑陋

摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

andorid 2.3 bug

  • @-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
  • after和before伪类无法使用动画animation
  • border-radius不支持%单位
  • translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

andorid 4.x bug

  • 三星 Galaxy S4中自带浏览器不支持border-radius缩写
  • 同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
  • 部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
  • android无法同时播放多音频audio

设计高性能css3动画

  • 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
  • 利用translate3D开启GPU加速

flex bug

伸缩盒模型 flex 主要版本变更

2009 display:box; display:-webkit-box;
-webkit-box-orient: vertical/horizontal; 子元素 列显示/行显示
-webkit-box-align: center; 水平显示属性 居中
-webkit-box-pack: center; 水平显示属性 居中
2011 display:-ms-flexbox;
-webkit-flex-direction: column/row; 子元素 列显示/行显示
-webkit-align-items: center; 水平显示属性 居中
-webkit-justify-content: center; 水平显示属性 居中
2012 display:flex;
flex-direction: column/row; 子元素 列显示/行显示
align-items: center; 水平显示属性 居中
justify-content: center; 水平显示属性 居中

浏览器兼容性可以参考CanIUse：
根据CanIUse的数据可以总结如下：

  • IE10部分支持2012，需要-ms-前缀
  • Android4.1/4.2-4.3部分支持2009，需要-webkit-前缀
  • Safari7/7.1/8部分支持2012，需要-webkit-前缀
  • IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀

CodePen 示例

See the Pen flex兼容写法 by LT (@togglelt) on CodePen.

fastclick

移动端click屏幕产生200-300 ms的延迟响应
事件响应顺序 touchstart -> touchmove -> touchend -> click
如果使用的是jQ或者zepto，原本绑定的是 click 事件，则可以使用fastclick.js解决点击延时的问题。或者直接绑定框架封装过的tab事件。

使用 rem 适配方案

所有涉及到布局的尺寸使用rem单位，字体要看iPhone6 和 6s 做相应的调整

var docEl = doc.documentElement, 
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth=docEl.clientWidth||320;
      var width = clientWidth < 320 ? 320 : clientWidth > 640 ? 640 : clientWidth;
      docEl.style.fontSize = 100 * (width / 320) + 'px';
      docEl.style.opacity=1;
      window.rem = 100 * (width / 320);

      // 添加屏幕标识，便于文字调整
      if(375 <= clientWidth && clientWidth < 414){
          docEl.classList.add('view6');
      }else if(414 <= clientWidth){
          docEl.classList.add('view6s');
      }
    };

docEl.style.opacity=0;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

//css
.wrap {height:2rem; width:3.2rem; font-size:14px;}
.view6 .wrap {font-size:15px;}
.view6s .wrap {font-size:17px;}

实现1px效果

移动web设计中，在retina显示屏下网页会由1px会被渲染为2px，0.5px才是1px的效果

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

//css
.bdr {border:1px solid #ddd;}
.hairlines .bdr {border-width:.5px;}

大部分来自于 白树 的博客，部分自已整理
后续会陆续添加…