@hotjp 2017-06-15T16:32:56.000000Z 字数 3317 阅读 1387

移动端开发

移动端 培训

1. doctype

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

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

<!doctype html>

2. viewport

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

完整的viewprot设置

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

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

3. 针对IOS优化

3.1 全屏

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

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

window.navigator.standalone

3.2 顶部状态栏背景色

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

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

共有三种 content ：

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

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

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

3.3 自动识别

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

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

3.4 iphone ipad输入框内阴影

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">

3.6 点击事件

a标签一定要有href，非a标签可加cursor:pointer，或者套一层a标签

<a href="javascript:;">点我点我</a>
<div style="cursor:pointer">点我点我</div>
<a href="javascript:;">
    <div>点我点我</div>
</a>

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元素时会有灰色半透明遮罩，某些国产浏览器下是蓝色的。

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

7. :active伪类失效

7.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边框

element{
    border-width:thin;
}

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

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

11. 缓存设置

<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的设备优化

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

微软老式浏览器

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

windows phone 取消点击高光

<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>

移动端开发

1. doctype

2. viewport

3. 针对IOS优化

3.1 全屏

3.2 顶部状态栏背景色

3.3 自动识别

3.4 iphone ipad输入框内阴影

3.5 桌面图标

3.6 点击事件

4. 滚动条优化

5. 禁止选中、复制文本

6. 禁用高光

7. :active伪类失效

7.1 方案1

7.2 方案2

8. 硬件加速

9. Retina屏的1px边框

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

11. 缓存设置

12. 浏览器私有及其他meta

12.1 QQ浏览器

12.2 UC浏览器

12.3 其他

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

资料扩展

RDFa（RDF attribute）

*.rnc

移动端开发

1. doctype

2. viewport

3. 针对IOS优化

3.1 全屏

3.2 顶部状态栏背景色

3.3 自动识别

3.4 iphone ipad输入框内阴影

3.5 桌面图标

3.6 点击事件

4. 滚动条优化

5. 禁止选中、复制文本

6. 禁用高光

7. :active伪类失效

7.1 方案1

7.2 方案2

8. 硬件加速

9. Retina屏的1px边框

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

11. 缓存设置

12. 浏览器私有及其他meta

12.1 QQ浏览器

12.2 UC浏览器

12.3 其他

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

资料扩展

RDFa（RDF attribute）

*.rnc

内容目录