移动端开发技巧
最后更新于：2022-04-01 22:08:37
##参与贡献
移动前端开发收藏夹，欢迎使用 [Issues](https://github.com/hoosin/mobile-web-favorites/issues/new) 以及 Pull Request
贡献者名单：[https://github.com/hoosin/mobile-web-favorites/graphs/contributors](https://github.com/hoosin/mobile-web-favorites/graphs/contributors)
##同类项目
[腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars)
[maxzhang博客](https://github.com/maxzhang/maxzhang.github.com/issues)
##issues
[QQ浏览器X5内核问题汇总](https://github.com/hoosin/mobile-web-favorites/issues/11)
##一些非常重要的工具类网站
[html5与css3技术应用评估](http://html5please.com/ "html5与css3技术应用评估")
[各种奇妙的hack](http://browserhacks.com/ "各种奇妙的hack")
[几乎所有设备的屏幕尺寸与像素密度表](http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density "几乎所有设备的屏幕尺寸与像素密度表")
[移动设备参数表](http://screensiz.es/phone "移动设备参数表")
[ios端移动设备参数速查](http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/ "ios端移动设备参数速查")
[浏览器兼容表](http://www.quirksmode.org/compatibility.html "浏览器兼容表")
[移动设备查询器](https://deviceatlas.com/device-data/devices "移动设备查询器")
[移动设备适配库](http://51degrees.codeplex.com/ "移动设备适配库")
[viewport与设备尺寸在线检测器](https://deviceatlas.com/device-data/devices "viewport与设备尺寸在线检测器")
[html5移动端兼容性速查](http://mobilehtml5.org/ "html5移动端兼容性速查")
[在线转换字体](http://www.fontsquirrel.com/tools/webfont-generator "在线转换字体")
[css3选择器测试](http://tools.css3.info/selectors-test/test.html "css3选择器测试")
[兼容性速查表](http://caniuse.com/ "兼容性速查表")
[浏览器的一些独特参数](http://www.browserscope.org/ "浏览器的一些独特参数")
[各种各样的媒体查询收集](http://nmsdvid.com/snippets/ "各种各样的媒体查询收集")
[css3动画在线制作器](http://isux.tencent.com/css3/ "css3动画在线制作器")
[css3渐变在线制作器](http://www.colorzilla.com/gradient-editor/ "css3渐变在线制作器")
[移动端手势表](http://ww1.sinaimg.cn/bmiddle/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg "移动端手势表")
[webkit独有的样式分析](http://ued.ctrip.com/blog/wp-content/webkitcss/ "webkit独有的样式分析")
##响应式测试工具
Firefox 浏览器内置了 自定义设计视图 的功能，可以通过 Firefox->Web 开发者->自定义设计视图（或者摁下 ```Shift + Ctrl + m``` ）。相比网络工具，运行更加流畅，无需联网。
[判断 iPad 和 iPhone 的版本和状态的 CSS 媒体查询代码](http://yujiangshui.com/document/css-media-queries-for-ipads-and-iphones-chinese-version/)
[Viewport Resizer](http://lab.maltewassermann.com/viewport-resizer/ "resize")
[screenqueri](http://beta.screenqueri.es/ "resize")
[responsivepx](http://responsivepx.com "resize")
[responsinator](http://www.responsinator.com/ "resize")
[resizemybrowser](http://resizemybrowser.com/ "resize")
[quirktools](https://quirktools.com/screenfly/ "resize")
##一篇webapp开发的最佳实践与中文总结
[原文](http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/)
[当前 WEB APP 开发的最佳实践](http://lyric.im/best-practice-for-web-app-development)
##来自[maxzhang](https://github.com/maxzhang "ava")的一些移动端经验总结干货
[移动Web单页应用开发实践——页面结构化](https://github.com/maxzhang/maxzhang.github.com/issues/8 "ava")
[移动Web产品前端开发口诀——“快”](https://github.com/maxzhang/maxzhang.github.com/issues/1 "ava")
[移动Web开发，4行代码检测浏览器是否支持position:fixed](https://github.com/maxzhang/maxzhang.github.com/issues/7 "ava")
[使用border-image实现类似iOS7的1px底边](https://github.com/maxzhang/maxzhang.github.com/issues/4 "ava")
[移动端web页面使用position:fixed问题总结](https://github.com/maxzhang/maxzhang.github.com/issues/2 "ava")
[移动Web开发实践——解决position:fixed自适应BUG](https://github.com/maxzhang/maxzhang.github.com/issues/11 "ava")
[移动手机浏览器m3u8格式视频流播放支持程度测试](https://github.com/maxzhang/maxzhang.github.com/issues/19 "ava")
##从`meta`开始
本节之后可能也涉及 `meta` 标签，但为了更加全面的摸透 `meta` 特地用一节的篇幅来系统概述。
###一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。
####1、http-equiv 属性的 Content-Type 值（显示字符集的设定）
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。
用法：
```html
```
注意：该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。
####2、name 属性的 viewport 值（移动屏幕的缩放）
也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
实际上我们可以操作的属性有 4 个：
>width – // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
>height – // viewport 的高度 （范围从 223 到 10,000 ）
>initial-scale – // 初始的缩放比例 （范围从 > 0 到 10）
>minimum-scale – // 允许用户缩放到的最小比例
>maximum-scale – // 允许用户缩放到的最大比例
>user-scalable – // 用户是否可以手动缩放 (no，yes)
```html
```
说明：
* 强制让文档与设备的宽度保持 1:1 ；
* 文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
* user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度
```css
body {
min-width: 320px;
}
```
####3、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）
```html
```
说明：
* 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
* 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
####4、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）
```html
```
说明：
* 网站开启对 web app 程序的支持。
* 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
####5、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）
```html
```
说明：
* 在 web app 应用下状态条（屏幕顶部条）的颜色；
* 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。
####6、name 属性设置作者姓名及联系方式
```html
```
###二、苹果 Web App 其他设置：
当然，配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：
```html
```
说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径。
使用：
* 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
* 图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）
```html
```
说明：这个 link 就是设置启动时候的界面。
使用：
* 放置的路径和上面一样。
* 官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。
* 如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释：Meta Tags
关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不同尺寸不同图标），可以查看官方标准文档：[Configuring Web Applications](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html "Applications")
##本资料很多引用了指尖上的js系列，在此向作者表示感谢
[对于Touch的处理](http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html "article1")
[处理简单手势](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-2.html "article2")
[处理复杂手势](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html "article3")
meta标签，这些meta标签在开发webapp时起到非常重要的作用
```html
```
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
*尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。*
注意根据[public_00](http://www.weibo.com/avajayam "ava")提供的资料补充，content使用分号作为分隔，在老的浏览器是支持的，但不是规范写法。
规范的写法应该是使用逗号分隔，参考:
[tip1](http://developer.android.com/guide/webapps/targeting.html) | [tip2](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html)
其中：
* width - viewport的宽度
* height - viewport的高度
* initial-scale - 初始的缩放比例
* minimum-scale - 允许用户缩放到的最小比例
* maximum-scale - 允许用户缩放到的最大比例
* user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。
关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，
是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。
当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
(请参考：指尖的下JS 系列文章)
##其中viewport相关的知识也可以参考大漠的文章
[此像素非彼像素](http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html "pixel")
##点击与click事件
对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
在移动浏览器中对触摸事件的响应顺序应当是：
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下
```css
-webkit-tap-highlight-color: rgba(0,0,0,0);
```
如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。
```css
body{-webkit-overflow-scrolling: touch;}
```
用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧？不过如果是一个div，然后设置```height:200px;overflow:auto;```的话，可以滚动但是完全没有那滑动效果，很郁闷吧？
我看到很多网站为了实现这一效果，用了第三方类库，最常用的是iscroll（包括新浪手机页，百度等）
我一开始也使用，不过自从用了```-webkit-overflow-scrolling: ```touch;样式后，就完全可以抛弃第三方类库了，把它加在```body{}```区域，所有的```overflow```需要滚动的都可以生效了。
##页面描述
```html
```
这个属性是当用户把连接保存到手机桌面时使用的图标，如果不设置，则会用网页的截图。有了这，就可以让你的网页像APP一样存在手机里了
```html
```
这个是APP启动画面图片，用途和上面的类似，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素
```html
```
这个描述是表示打开的web app的最上面的时间、信号栏是黑色的，当然也可以设置其它参数，详细参数说明在：[Supported Meta Tags](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html "css3渐变在线制作器")
```html
```
这2个描述也很有用的，如果没有它，你的web app会用safari浏览器打开，有了它，就会用独立进程的无地址栏的打开，完全可以和普通的APP比拟了
下面还有个不错的css，是用来区分视网膜屏幕的，这样你可以在iphone这样的手机里载入2x的图片，就不会模糊了
```css
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url(logo@2x.png);}
}
```
##样式表:
```html
// 设置开始页面图片
// 在设置书签的时候可以显示好看的图标
// 肖像模式样式
#landscape { display: none; }
//横屏时使用的样式
```
##手机浏览器常用手势动作监听封装(配合zepto,来自mansonchor)
[手机浏览器常用手势动作监听封装](http://wo.poco.cn/manson/post/id/268780)
##事件 ： (请参考：指尖的下JS 系列文章)
##手势事件
* touchstart //当手指接触屏幕时触发
* touchmove //当已经接触屏幕的手指开始移动后触发
* touchend //当手指离开屏幕时触发
* touchcancel
##触摸事件
* gesturestart //当两个手指接触屏幕时触发
* gesturechange //当两个手指接触屏幕后开始移动时触发
* gestureend
##屏幕旋转事件
* onorientationchange
##检测触摸屏幕的手指何时改变方向
* orientationchange
##touch事件支持的相关属性
* touches
* targetTouches
* changedTouches
* clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
* clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
* screenX // Relative to the screen
* screenY // Relative to the screen
* pageX // Relative to the full page (includes scrolling)
* pageY // Relative to the full page (includes scrolling)
* target // Node the touch event originated from
* identifier // An identifying number, unique to each touch event
* 屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
##判断屏幕是否旋转
```js
function orientationChange() {
switch (window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};
};
```
##添加事件监听
```js
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
```
##隐藏地址栏 & 处理事件的时候，防止滚动条出现：
```js
// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
```
##双手指滑动事件：
```js
// 双手指滑动事件
addEventListener('load',function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作
return true;
};
```
##判断是否为iPhone：
```js
// 判断是否为 iPhone ：
function isAppleMobile() {
return (navigator.platform.indexOf('iPad') != -1);
};
```
##localStorage:
```js
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。
localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据
localStorage.removeItem('n'); // 删除名称为 n 的数据
```
##使用特殊链接：
如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,
```html
打电话给我
发短信
```
或用于单元格：
```html
';