[关闭]
@hotjp 2017-06-15T16:32:56.000000Z 字数 3317 阅读 1421

移动端开发

移动端 培训


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. <meta name="apple-mobile-web-app-status-bar-style" content="default">
  3. <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. <meta name="format-detection" content="telephone=no">
  2. <meta name="format-detection" content="email=no">

3.4 iphone ipad输入框内阴影

  1. element{
  2. -webkit-appearance:none;
  3. }

3.5 桌面图标

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

3.6 点击事件

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

  1. <a href="javascript:;">点我点我</a>
  2. <div style="cursor:pointer">点我点我</div>
  3. <a href="javascript:;">
  4. <div>点我点我</div>
  5. </a>

4. 滚动条优化

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

  1. body{
  2. -webkit-overflow-scrolling:touch;
  3. overflow-scrolling:touch;
  4. }

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

5. 禁止选中、复制文本

移动端简版:

  1. element{
  2. -webkit-user-select:none;
  3. user-select:none;
  4. }

全移动端浏览器版本:

  1. element{
  2. -webkit-user-select:none;
  3. -moz-user-select:none;
  4. -khtml-user-select:none;
  5. user-select:none;
  6. }

6. 禁用高光

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

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

7. :active伪类失效

7.1 方案1

  1. <body ontouchstart="">

7.2 方案2

  1. <style>
  2. a{
  3. color:#000;
  4. }
  5. a:active{
  6. color:#fff;
  7. }
  8. </style>
  9. <a href="#">xx</a>
  10. <script>
  11. document.addEventListener("touchstart",function(){},false);
  12. </script>

8. 硬件加速

主要用于css3动画的加速

  1. element{
  2. -webkit-transform:translate3d(0,0,0);
  3. transform:translated3d(0,0,0);
  4. }

9. Retina屏的1px边框

  1. element{
  2. border-width:thin;
  3. }

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

  1. *{
  2. -webkit-text-size-adjust:100%;
  3. }

11. 缓存设置

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

12. 浏览器私有及其他meta

12.1 QQ浏览器

  1. <!--全屏-->
  2. <meta name="x5-fullscreen" content="true">
  3. <!--强制竖屏-->
  4. <meta name="x5-orientation" content="portrait">
  5. <!--强制横屏-->
  6. <meta name="x5-orientation" content="landscape">
  7. <!--应用模式-->
  8. <meta name="x5-page-mode" content="app">

12.2 UC浏览器

  1. <!--全屏-->
  2. <meta name="full-screen" content="yes">
  3. <!--强制竖屏-->
  4. <meta name="screen-orientation" content="portrait">
  5. <!--强制横屏-->
  6. <meta name="screen-orientation" content="landscape">
  7. <!--应用模式-->
  8. <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

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

资料扩展

RDFa(RDF attribute)

自XHTML 2.0第六版开始写入W3C草案。
2008年正式成为W3C标准。

*.rnc

对于实例对象的抽象化。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注