安卓和Ios 手机兼容性

1.日期兼容性

解决方法（请看我上一篇文章）
安卓、ios时间转换成时间戳的形式

2.input框聚焦，ios出现outline或者阴影，安卓显示正常

解决方法

input:focus{outline:none} input:{-webkit-appearance: none;}

3.关于flex布局

解决方法
flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行啦。
如果你的布局必须要用到换行，那就在外层包裹一个大的div，然后设置几个小div，每个小div的布局都是flex（但是不换行哦）；（希望你能理解我的意思，如果不理解，可以在下方留言，我会实时做出解答）

4.ios系统，会将数字当成电话号码，导致变色

解决方法

<meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none">

将上面的代码加入到<head>标签中

5.禁止安卓识别email

解决方法

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

6.input 的placeholder属性会使文本位置偏上

解决方法

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

7.input type=number之后，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important; margin: 0; }

作者：一个写前端的姑娘
链接：https://www.jianshu.com/p/860f7e9470c9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

==================

1.JavaScript中的Date对象在Safari与IOS中的坑

var date =new Date("2018-07-25 19:25");

这段代码是获得字符中指定的日期，它Firefox、Chrome中就能运行，但是放在Safari就会报错，错误是NaN
解决办法：

//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
var value = '2018-07-25 19:25';
value = value.replace(/\-/g, "/");

2.禁止图片点击放大
部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性

img{ 
    pointer-events: none; 
}

这个会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层

3.禁止页面缩放

这样设置在ios10系统中是失效的，如果需要禁止ios缩放，下面代码亲测有用

window.onload=function () { 
      禁止双击放大 
      document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false);
      禁止手势放大
      document.addEventListener('gesturestart', function (event) {
         event.preventDefault();
      });
}

4.禁止 iOS 识别长串数字为电话

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

5.禁止复制、选中文本

设置CSS属性 -webkit-user-select:none

6.JS跳转手机QQ的聊天页面

Android: URL

mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

iOS: URL:

mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

7.一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发，css增加cursor:pointer就搞定了（未测试）
8.上下拉动滚动条时卡顿、慢（未测试）

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

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

9.清除button,input,a标签的默认样式

a:hover, a:active,button,input:focus{
  outline: none;
  border: none;
}

======================

问题1：移动端项目要求是全屏滚动，用的是 fullpage，上下滚动时安卓正常，苹果手机浏览器上下滚动时会出现底色问题

解决方案：
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});
1
2
3
4
问题2：移动端用video标签用苹果手机在浏览器上打开和安卓机上打开是不一样的

解决方案：
苹果机默认打开video是全屏的，所以要阻止默认全屏，加上下面这四个属性就可以啦
<video src="#" webkit-playsinline='true' playsinline='true' x5-playsinline x-webkit-airplay="allow" > </video>
webkit-playsinline -----针对I0S9
playsinline------针对IOS10和11 IOS微信浏览器支持小窗内播放
x-webkit-airplay="allow"----------启用AirPlay支持
x5-playsinline----------x5内核video
1
2
3
4
5
6
7
问题3：移动端隐藏浏览器的地址栏和菜单栏

解决方案：
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />
————————————————
版权声明：本文为CSDN博主「海是最蓝的天」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/li1342392184/article/details/88044732

===================

1: apple-mobile-web-app-capable (是否隐藏苹果手机工具栏和菜单栏)(是否苹果手机全屏)
No:默认样式,不隐藏
Yes:屏蔽工具栏和菜单栏;全屏显示
2: apple-mobile-web-app-status-bar-style(苹果手机状态栏如何显示)
Black:显示为黑色
black-translucent:显示为黑色并半透明(灰色)(可能会遮盖20到40px的页面顶部内容)
default:默认值(白色)
3: format-detection
Telephone:是否识别为手机号 yes/no
Email:是否识别为电子邮箱 yes/no
Adress:是否识别为地址 yes/no 注:当为yes时iPhone会自动跳转到地图
写法:
· meta name="format-detection" content="telephone=no"
· meta name="format-detection" content="email=no"
· meta name="format-detection" content="adress=no"
或者
meta name="format-detection" content="telephone=no,email=no,adress=no"
4: HandheldFriendly: 设备优化,针对一些老的不识别viewport的浏览器，比如黑莓
Yes/no
5: viewport:设置并规范webapp在手机浏览器中的可视区域
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
常规写法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

关于苹果手机webapp的设置
1: apple-mobile-web-app-capable设置为yes
允许苹果机通过safari添加主屏按钮到主屏幕上
2:设置<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
设置苹果webapp的图标

3: <link rel="apple-touch-startup-image" href="/startup.png"/>
设置当网页被设置为webapp时,打开此webapp时启动时的图片

==================

一：全局

1.阻止弹出层下面的页面滚动

给弹出层的最外层标签上加@touchmove.prevent

二：ipone

1.readonly与disabled

在iphone下，输入框为readonly时，点击依然会获得焦点；

建议设为disabled

2.button在iphone下会有默认自带的样式和圆角

-webkit-appearance: none;清除自带样式

3.button,a,img等点击时会高亮，去除方式如下：

-webkit-tap-highlight-color：rgba(255,255,255,0);

4.不兼容new date("2017-09-08 00:00:00") 这种写法，需要把‘-’换成‘/’：

var date="2017-09-08 00:00:00"

new Date(date.replace(/-/g, "/"))

三：android

1.输入框获取焦点时，软键盘会遮挡，主动触发让输入框上移

if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('resize', function () {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
            window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
}