总结移动端页面开发时需要注意的一些问题

1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

有些手机网站我们看到如下声明：

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

设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。

使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

完整的viewport设置，当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

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

2、苹果手机的一些设置。

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

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

3、format-detection设置。

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

format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。

4、上下拉动滚动条时卡顿、慢

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

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

5、禁止复制、选中文本

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

解决移动设备可选中页面文本(视产品需要而定)

6、长时间按住页面出现闪退

element {
    -webkit-touch-callout: none;
}

7、iphone及ipad下输入框默认内阴影

Element{
    -webkit-appearance: none; 
}

8、ios和android下触摸元素时出现半透明灰色遮罩

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

9、active兼容处理即伪类 :active 失效

方法一：body添加ontouchstart

<body ontouchstart="">

方法二：js给 document 绑定 touchstart 或 touchend 事件

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener(‘touchstart‘,function(){},false);
</script>

10、动画定义3D启用硬件加速

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

注意：3D变形会消耗更多的内存与功耗

11、Retina屏的1px边框

Element{
    border-width: thin;
}

12、旋转屏幕时，字体大小调整的问题

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

13、顶部状态栏背景色

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

14.手机网站改版或变动时做好301重定向。

百度官方对于手机网站改版或者更换域名指出，新老内容映射要尽量简单，换域名时，如果能够做到路径不变，则负面影响面会更小，而且影响时间也会更短

15.做好移动版与PC版网站的转换

①确保在手机网站或者PC端网站各个页面上有相应的导航或者提示链接，让用户可以在手机版和PC版进行切换，也便于搜索引擎更好的收录。

②百度官方曾声明，对于移动站点，当baiduspider ua或者其它无法确定来源的ua访问时，建议默认情况下直接返回html5 或xhtml 类型的移动页面，不要重定向到PC页面。

16.手机网站适配声明。

手机页面进行合适的 DOCTYPE 声明有助于搜索引擎识别该页面是否适合手机浏览。声明位于文档中的最前面的位置，处于标签之前。例如：

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

wml协议的手机页面可以使用如下DOCTYPE:

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>

而HTML5协议的DOCTYPE为：

<!DOCTYPE HTML>

17.url链接规范化。

①对于多个板块的二级域名或者目录来说，使用规范、简单的url，尽量去除与页面内容无关的参数，如用来区分手机型号、区分访问用户，方便统计等的参数。如手机版的“百度知道”http://wapiknow.baidu.com/

②页面url链接跳转最好是正常格式的目标url，不要中间进行跳转。

18、定位和页面设计。

无论是PC端还是移动端，网站都要考虑清楚消费群体的定位问题。虽然智能手机用户数量非常普及，但是要明白中国的大部分手机用户使用的还是2G网络，一直高喊的3G、4G手机用户只有大约15%左右。所以，在页面设计时，要考虑到用户打开网页的时长，一些炫丽的flash、JS等建议还是不用为好。这不仅仅是用户体验的问题，也是尽量减少百度索引抓取的工作，让百度蜘蛛尽可能多的爬行和收录页面。

19.其它优化事项

其它一些优化要点与传统PC端网站优化一样。如网站结构要用合理的树形结构，最好采用树形和扁平相结合;清晰的面包屑导航，方便搜索引擎爬行抓取和用户体验;title写法要尽量包含关键字，首页、频道页、内容页写法要有所侧重。