一、移动端种类、分辨率大小

说明: 以主流的iPad、iPhone为例。 
工具: Resizer官网: Resizer 
用法: 将通栏处写有 “Click or Bookmark”的蓝色按钮拖拽至标签栏(加入收藏,注意,不是上面的官网地址) 。先 打开要进行测试的页面 ,再点击 已加入收藏夹的标签 即可。此时被测试页面顶部会多出一条工具栏,于是就可以根据需求任意进行测试。 
分辨率 :预设的分辨率有(可切换横版,竖版) 
普通智能手机:320×480 
iPhone5:320×568 
普通平板:800×600 
iPad2、3、mini:768×1024 
宽屏电脑:1280×800 
HDTV:1920×1080 
另外,也可以自定义分辨率。

二、meta标签

1)    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    //强制让文档的宽度与设备的宽度保持1:1,文档初始化缩放比例是1:1,且不允许用户点击屏幕放大浏览,尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
其他属性有:
width;
height; 
initial-scale; 
minimum-scale; 
maximum-scale; 
user-scalable; 

2) <meta name="apple-mobile-web-app-capable" content="yes" />
    //iPhone私有标签,它表示:允许全屏模式浏览

3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    //iPhone私有标签,它指定的iPhone中safari顶端的状态条的样式

4) <meta name="format-detection" content="telephone=no; email=no" />
    //不识别邮件和不把数字识别为电话号码

二、CSS3 -webkit

1、 问题描述 :移动端表单类有圆角、阴影,点击链接时,有灰色底高亮等

1) 消除被点击元素的外观变化,所谓的点击后高亮:
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
2)    阻止旋转屏幕时自动调整字体大小:-webkit-text-size-adjust:none;
3)    解决字体在移动端比例缩小后出现锯齿的问题:-webkit-font-smoothing: antialiased;
4)    盒子阴影:-webkit-box-shadow: none;
5)    圆角:-webkit-border-radius: 0;
6)    appearance 属性使元素看上去像标准的用户界面元素,
    也可以取消默认的样式:-webkit-appearance: none;
7)    鼠标可以悬停在内容上(指向该内容)而不激活它(单击它):-webkit-touch-action: manipulation;  

三、使用自适应模式布局

为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),而且自适应之后也不用考虑分辨率的问题。 
比如:-webkit-box,流体盒模型,这是一种自适应的解决方案。 点此详情

四、javascript库

1.retina.js (官网貌似打不开了,另附 下载通道 ) 
有很多设备的“devicePixelRatio”都大于1.5或者等于2(window.devicePixelRatio = 物理像素/dips)。 移动端web app上CSS要为Retian屏幕准备另外的图片及代码: 
方法一:

<script type="text/javascript" src="<路径>/retina.js"></script>//使用方法
<style>
.logo {
  background-image: url('/images/my_image.png'); //通用屏幕
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) { //当使用Retina屏幕时,读取此段样式
  .logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px; //限定大图片的大小
  }
}
</style>

方法二:

<img src="/images/image.png" /> //通用屏幕
<img src="/images/my_image.png" data-at2x="<路径>/image@2x.png" /> //retina屏幕

2. fastclick.js 
说明 : 这个要重点介绍一下! 
当触发"Click"事件时,移动端浏览器将等待约300毫秒的时间后再做出响应,这样的原因是浏览器要判断用户是否执行双击。 
导入 fastclick.js 即可减少这个时间差:

<script type='application/javascript' src='/path/to/fastclick.js'></script>

jQuery 使用方法:

$(function() {
    FastClick.attach(document.body);
});

五、其他技巧

  1. Float属性替换 
    使用display:inline-block属性代替;因为float不适用于反向停靠和无法接受水平间隙

  2. 检测用户是通过主屏启动你的web app 
    从主屏启动的web app和浏览器访问web app最大的区别 是它清除了浏览器上方和下方的工具条,这样web app就更加像是native app了。

    window.navigation.standalone
    
  3. 如何解决盒子边框溢出 当指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,可以为其添加一个特殊 的样式:

    -webkit-box-sizing:border-box;
    //用来指定该盒子的大小包括边框的宽度。
    
  4. 自动大写与自动修正 
    关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项

    <input type="text" autocapitalize="off" autocorrect="off" />
    
  5. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
    // 肖像模式样式       
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
    // 风景模式样式
    

    方法二:

    //肖像模式样式
    <style media="all and (orientation:portrait)" type="text/css">
       #landscape { display: none; }
    </style>
    
    
    //风景模式样式 
    <style media="all and (orientation:landscape)" type="text/css">
       #portrait { display: none; }
    </style>