IOS和安卓差异性表现

1.ios下不支持 2017-07-08日期格式，会出现NaN-NaN-NaN乱码，因此进行转换

    var today = '2018-03-22';  today = today.replace(/-/g,"/");

    这种格式的时间，在IOS上转化为时间戳，转化不成功

2.安卓软件盘与安卓软键盘的差异性处理，安卓点击输入框时有时会出现软键盘遮挡输入框，需要处理下

var HEIGHT = $('.page').height(); // 整个页面的高度，单屏页面

$(window).resize(function() { // 软键盘弹出，触发 resize 方法

    $('.page').height(HEIGHT);

  }); 

3.position属性带来的浮动问题：

问题描述：

在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常

设备：

android设备存在此问题，而ios设备显示正常

原因分析：

css属性中对容器的样式中提到，子元素定位方式为absolute或者fixed，若父容器没有添加属性position:relative；则当前元素的定位坐标是相对于body元素的（大部分情况下也可描述为当前窗口可见范围）。问提的出现是android的虚拟键盘显示机制，占用了一部分的屏幕资源，是的分配给浏览器的屏幕资源高度缩小，position为absolute和fixed的元素在父容器没有定义position:relative的情况下，因为浏览器窗体可见范围的缩小，定位响应发生改变，所以出现“被顶起”的情况。

解决方案：

在分析中提到，父级容器与子元素的关系，所以在父级容器中定义容器高度，并设定position属性的值为relative即可解决此问题。

4.html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

如下：

400-810-6999 转 1034

拨打手机直接如下

<a\> 点击拨打15677776767

5.transition闪屏

/设置内嵌的元素在3D 空间如何呈现：保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

-webkit-backface-visibility:hidden;

6.圆角bug

某些Android手机圆角失效

background-clip: padding-box;

7、设置缓存

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

8.判断是安卓还是IOS

var ua = navigator.userAgent.toLowerCase();

//var isIOS = /\((iPhone|iPad|iPod)/i.test(ua);

var isIOS = /\(iPad/i.test(ua);

var isIPhone = /\(iPhone/i.test(ua);

var isAndroid = /android/.test(ua);

let u = navigator.userAgent

 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端

8.判断是微信环境还是浏览器环境还是app环境

var ua = window.navigator.userAgent.toLowerCase();

//ƽ̨̽²â

if (ua.match(/Bestpay/i) == 'bestpay') {

ENV = "App";

} else if (ua.match(/MicroMessenger/i) == 'micromessenger') {

ENV = "Weixin";

} else {

ENV = "Browser";

}

9.-webkit-user-select: none; 设置这个属性在ios上 input框无法输入， 解决方案注释这条属性，或者-webkit-user-select: auto;