移动端开发常见问题

安卓浏览器看背景图片，有些设备会模糊

经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

防止手机中网页放大和缩小。

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

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

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

长时间按住页面出现闪退

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

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

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

圆角bug

某些Android手机圆角失效

background-clip: padding-box;

IOS中input键盘事件keyup、keydown、keypress支持不是很好

用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！

解决办法：
可以用html5的oninput事件去代替keyup

IOS键盘字母输入，默认首字母大写

select option {
    Sdirection: rtl;
}

通过transform进行skew变形，rotate旋转会造成出现锯齿现象

可以设置如下：
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)

移动端点击300ms延迟

在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js