移动web开发小结

公司里做移动web开发也有一段时间了,在这里总结下开发要注意的问题

页面结构

直接使用html5+css3标准开发,对老机器进行降级处理,html5和css3在ios4和android2.3之后的机器上大都能顺利执行,不排除个别未更新的浏览器的使用老版本的内核,这个时候需要使用特性检测或者降级处理,比如不支持css3的animation或者canvas,直接显示静态图片,保证主要流程
一般需要在页面添加下面几个meta

<meta charset="utf-8"> <!-- 指定页面编码 -->
<meta name="HandheldFriendly" content="True"> <!-- 对手持设备友好 -->
<meta name="viewport"
      content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <!-- 关闭用户缩放,定义viewport的初始和最大缩放比例 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- iphone safari隐藏导航栏和工具栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 系统状态栏风格 -->

android环境下隐藏导航栏和工具栏需要通过js来控制

window.addEventListener('load',function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });

如果想网页通用,在其他平台上或者其他浏览器也能看,除了CSS hack,也可以用标签来区别对待显示效果

<!--[if lt IE 7 ]>
<body class="ie6 "> <![endif]--> <!--[if IE 7 ]>
<body class="ie7 "> <![endif]--> <!--[if IE 8 ]>
<body class="ie8 "> <![endif]--> <!--[if !IE]><!-->  <!--<![endif]--> 

如果想让IE9之前的版本也部分支持html5元素,可以判断后添加这个html5.js(因为国内的网络环境,可以直接保存在自己的服务器上保证速度)。其实移动互联网根本不用考虑ie9之前的版本(ie10+就要考虑了,windows phone的用户量也是有的),当然如果要求网页是响应式的设计就必须要加了。

<!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]-->

如果需要告诉网页不要将数字当作电话号码

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

可以根据各个平台的特点添加其他内容,比如对于iphone和ipad设置网站启动图标

<link rel="apple-touch-icon" href="icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon-iphone-high.png"/>

对横屏或者竖屏设置样式

<style media="all and (orientation:portrait)" type="text/css"> /*竖屏*/ </style>
<style media="all and (orientation:landscape)" type="text/css"> /*横屏*/ </style>

在页面可以通过 tel URI来打电话,比如

<a href="tel:13900000000">13900000000</a>

如果想通过js来触发,直接

window.location.href = 'tel:13900000000';
经验积累
  1. 普通的click事件在移动web上会有一定时间的延迟,在对触摸要求较高的场景使用touchstart touchend来模拟click
  2. 动画方面优先使用css3的动画,比如元素移动,如果浏览器不支持css3再使用js
  3. css3开启硬件加速
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);

webkit内核浏览器可以这样

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

在Chrome或者Safari中,如果css3的transform或者animation遇到闪烁的情况,这样修复

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;
```css

详情可参考[http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css](http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css "http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css")  
 4. webkit不使用默认焦点样式

```css
-webkit-tap-highlight-color:rgba(0,0,0,0);
  1. 先调试iphone,再调试android
  2. 普通屏幕显示正常的图片,在Retina屏下要显示更高分辨率的图片(2倍分辨率图片资源),不然会模糊,img标签通过devicePixelRatio属性来判断是否高清屏,样式中的背景图通过媒体查询来解决
  3. 尽量让动画元素不在文档流中,减少页面重排,以提高性能(position:absolute或者position:fixed)
平台差异

android的碎片化很严重,个人在老版的android的web开发中遇到很多问题,一般需要测试的时候提供多种机型,javascript直接基于DOM3和html5标准下浏览器提供的api就可以了,浏览器不支持的时候利用特性检测降级处理,比如离线缓存。这里积累一些碰到的奇怪的问题

  1. orientationchange
    在android老版本的一些浏览器里不支持这个,只能改用resize事件来辅助处理,但是老版本的一些浏览器在处理resize事件的过程中,一开始获取到的比如window等尺寸发生变化的容器的宽度和高度是倾斜屏幕前的数据。。。我只好判断如果是android2平台,统一使用resize处理屏幕倾斜,并且如果要获取倾斜后的尺寸,需要加一个延时时间比如500ms再进行处理。
  2. position:fixed
    这个属性在ios4平台无效,需要js来控制
  3. 颜色渐变
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e3ebf2), to(#b8c0c6));/*老版本的webkit内核要这样写*/ 
background: -webkit-linear-gradient(top,#e3ebf2, #b8c0c6) repeat scroll 0 0 #b8c0c6; 
background: -ms-linear-gradient(top,#e3ebf2, #b8c0c6) repeat scroll 0 0 #b8c0c6; 
background: -moz-linear-gradient(top,#e3ebf2, #b8c0c6) repeat scroll 0 0 #b8c0c6; 
background: linear-gradient(top,#e3ebf2, #b8c0c6) repeat scroll 0 0 #b8c0c6;
```css


Show Comments