移动端开发

1. doctype

1	<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

远程拉取dtd的方式是XHTML的写法，正常开发使用下面的html5 doctype

1	<!doctype html>

2. viewport

使用viewport设置视口，控制内容宽度、缩放比例等

完整的viewprot设置

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

最后一个参数写成 0 或 no 都可以。

3. 针对IOS优化

3.1 全屏

1	<meta name="apple-mobile-web-app-capable" content="yes">

如果 content 设置为 yes ，web应用将以全屏模式运行，反之，则不会。content 的默认值是 no ，可以通过js查询只读只读属性来确定app是否全屏模式显示。

1	window.navigator.standalone

3.2 顶部状态栏背景色

1	<meta name="apple-mobile-web-app-status-bar-style" content="black">

仅在全屏模式下生效 (ios2.1+)

共有三种 content ：

1
2
3

<!--上下分开，白背景-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">

1 2	<!--透明--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

1 2	<!--颜色--> <meta name="apple-mobile-web-app-status-bar-style" content="white">

3.3 自动识别

使用 format-detection 来启用或禁用自动识别页面中的电话号码和邮箱（所有移动端都支持，只有ios默认on）

1 2	<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">

3.4 iphone ipad输入框内阴影

1
2
3

element{
	-webkit-appearance:none;
}

3.5 桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" size="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" size="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" size="152x152" href="touch-icon-ipad-retina.png">

4. 滚动条优化

上下滑动卡顿或者慢的时候

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

其他需要滚动的元素同理。

5. 禁止选中、复制文本

移动端简版：

element{
	-webkit-user-select:none;
	user-select:none;
}

全移动端浏览器版本：

element{
	-webkit-user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}

6. 禁用高光

touch元素时会有灰色半透明遮罩，某些国产浏览器下是蓝色的。

1
2
3

element{
	-webkit-tap-highlight-color:rgba(255,255,255,0);
}

7. :active伪类失效

7.1 方案1

1	<body ontouchstart="">

7.2 方案2

<style>
a{
	color:#000;
}
a:active{
	color:#fff;
}
</style>
<a href="#">xx</a>
<script>
document.addEventListener("touchstart",function(){},false);
</script>

8. 硬件加速

主要用于css3动画的加速

element{
	-webkit-transform:translate3d(0,0,0);
	transform:translated3d(0,0,0);
}

9. Retina屏的1px边框

1
2
3

element{
	border-width:thin;
}

10. 旋转屏幕，字体大小调整

1
2
3

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

11. 缓存设置

1	<meta http-equiv="cache-control" content="no-cache">

12. 浏览器私有及其他meta

12.1 QQ浏览器

<!--全屏-->
<meta name="x5-fullscreen" content="true">
<!--强制竖屏-->
<meta name="x5-orientation" content="portrait">
<!--强制横屏-->
<meta name="x5-orientation" content="landscape">
<!--应用模式-->
<meta name="x5-page-mode" content="app">

12.2 UC浏览器

<!--全屏-->
<meta name="full-screen" content="yes">
<!--强制竖屏-->
<meta name="screen-orientation" content="portrait">
<!--强制横屏-->
<meta name="screen-orientation" content="landscape">
<!--应用模式-->
<meta name="browsermode" content="application">

12.3 其他

不识别viewport的设备优化

1	<meta name="HandheldFriendly" content="true">

微软老式浏览器

1	<meta name="MobileOptimized" content="320">

windows phone 取消点击高光

1	<meta name="msapplication-tap-highlignt" content="no">

13. 移动端中input的键盘事件兼容

包含 keydown , keyup , keypress 支持问题。

建议使用html5的 input 事件去代替 keyup

<input type="text" id="foo">
<script>
document.getElementById("foo").addEventListener("input",function(e){
	var value = e.target.value;
});
</script>