手机触屏版页面开发总结

设置viewpoint和屏幕等宽：

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

------------------------------------------------------------------------------------------------------------

主流分辨率:

Android：

主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。

（非主流机型还包括：240x320, 320x480, 640x960 这三种，其中两种都与 iPhone 一致。）

iOS: 

主流机型主要为 320x480, 640x960, 640x1136,750*1334,1242*2208;
[pad] 1024x768, 2048x1536这五种。

WP：

主流机型主要为 480x800，720x1280, 768x1280 这三种

------------------------------------------------------------------------------------------------------------

使用相对单位：

1、宽、高、填充、边界均使用百分比

2、字体em/rem

em:相对父级，rem(root element):相对根父级，

ps:字体单位一览表(各大浏览器默认字体16px)

------------------------------------------------------------------------------------------------------------

使用 CSS 媒体查询

@media screen and (min-width: 640px){    

           样式

}

------------------------------------------------------------------------------------------------------------

去掉手持设备点击时出现的透明层:

a,button,input{   -webkit-tap-highlight-color: rgba(0,0,0,0);   -webkit-tap-highlight-color: transparent; }

------------------------------------------------------------------------------------------------------------

去掉input在ios下的默认效果:

input{    resize: none;    -webkit-appearance:none;}

------------------------------------------------------------------------------------------------------------

阻止旋转屏幕时自动调整字体大小：

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {    -webkit-text-size-adjust:100%;}

------------------------------------------------------------------------------------------------------------

禁止自动对符合电话格式的文本的格式化显示：

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

------------------------------------------------------------------------------------------------------------

禁止自动对符合地址格式的文本的格式化显示：

<meta name="format-detection" content="address=no">

------------------------------------------------------------------------------------------------------------