ios与安卓样式兼容问题-蒲公英云

1.margin在IOS中失效
　　在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。

2.fixed定位问题
　　整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行
　flex中使用绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，Android能达到理想效果
　总而言之尽量不用fixed

3.absolute定位问题
　　①使用absolute定位，并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出，出现页面左右可以移动的bug，模拟器上是没有问题，但是真机上是有这个问题的。这个问题让我调试并痛苦了许久
　　②使用absolute并且当前元素是flex容器这种情况在Ios下面布局不会起到左右，会出现所有元素转换成了absloute并且文字错位
　　③总而言之尽量不用 absolute

word-spacing在button中的问题
　　有时候在使用大按钮的时候两个字中间希望有段间距，但是目前没有找到能使用的占位符，所以使用了的word-spacing加空格这个方法来设置文字的间距，但是在iPhone6s 上两个字中间一个空格的时候整体会向右偏，必须设置两个空格。

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

//用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？
经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。
想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。
//代码可以如下：
background:url(../images/icon/all.png)  no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; 
height:50px;

6、h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。

//可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
 $(window).resize(function(){ 
      if($(document).height() < oHeight){ 
            $("#footer").css("position","static"); 
      }else{ 
            $("#footer").css("position","absolute");
      } 
});

7、不让 Android 手机识别邮箱

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

8、禁止 iOS 识别长串数字为电话

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

9、禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

10、消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

11、iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉     
 this.value = this.value.replace(/\u2006/g, '');

12、禁止ios和android用户选中文字

-webkit-user-select:none

13、在ios和andriod中,audio元素和video元素无法自动播放

//解决方案：触屏即播
$('html').one('touchstart',function(){ audio.play()})

14、ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

15、android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

16、CSS动画页面闪白,动画卡顿

//解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

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

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

18、Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：
PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;

19、往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobile safari中。这与*往返缓存(bfcache)*有关系。
解决方法 ：window.onunload = function(){};

20、calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }

21、iOS6下伪类:hover

除了<a>之外的元素无效；
在Android下则有效。类似
div#topFloatBar_l:hover  #topFloatBar_menu { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

22、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

23、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
如下：
<ahref="tel:4008106999,1034">400-810-6999 转 1034</a>
拨打手机直接如下:
 <a href="tel:15677776767">点击拨打15677776767</a>

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

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

25、启动画面

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