ios和android适配问题总结 - sandisen(3)_H5之家 - 中国HTML5教程资源分享第一站

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

Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } 设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。一篇文章有详细介绍，地址：

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>

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

Element { -webkit-transform:translate3d(0,0,0) transform: translate3d(0,0,0); } 注意：3D变形会消耗更多的内存与功耗

Retina屏的1px边框

Element{ border-width:thin; }

webkit mask 兼容处理

某些低端手机不支持css3 mask，可以选择性的降级处理。比如可以使用js判断来引用不同class： if('WebkitMask'indocument.documentElement.style){ alert('支持mask'); }else{ alert('不支持mask'); }

圆角bug

某些Android手机圆角失效解决方案：background-clip: padding-box;

顶部状态栏背景色

<metacontent="black"/> 说明：除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。

设置缓存

桌面图标

<linkhref="touch-icon-iphone.png"/> <linksizes="76x76"href="touch-icon-ipad.png"/> <linksizes="120x120"href="touch-icon-iphone-retina.png"/> <linksizes="152x152"href="touch-icon-ipad-retina.png"/> iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！ <linkhref="touch-icon-iphone.png"/> 图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)

启动画面

<linkhref="start.png"/> iOS下页面启动加载时显示的画面图片，避免加载时的白屏。可以通过madia来指定不同的大小：  <link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)"/>  <link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"/>  <linkmedia="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">  <link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)"/>  <link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)"/>  <link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>  <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>

浏览器私有及其它meta

以下属性在项目中没有应用过，可以写一个demo测试以下！ //QQ浏览器私有全屏模式 <metacontent="true"> 强制竖屏 <metacontent="portrait"> 强制横屏 <metacontent="landscape"> 应用模式 <metacontent="app"> //UC浏览器私有全屏模式 <metacontent="yes"> 强制竖屏 <metacontent="portrait"> 强制横屏 <metacontent="landscape"> 应用模式 <metacontent="application"> //其它针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta content="true"> 微软的老式浏览器 <meta content="320"> windows phone 点击无高光 <meta content="no">

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

问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！解决办法：可以用html5的oninput事件去代替keyup <input type="text"id="testInput"> <script type="text/javascript"> document.getElementById('testInput').addEventListener('input',function(e){ varvalue = e.target.value; }); </script> 然后就达到类似keyup的效果！

h5网站input 设置为type=number的问题
```