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;

}

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

img{

    pointer-events: none;

}

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

9.禁止页面缩放

这样设置在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();

      });

}

10.一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发，css增加cursor:pointer就搞定了（未测试）

11.上下拉动滚动条时卡顿、慢（未测试）

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

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

结语

上面的兼容，都是在开发中遇到的，据个人经验，这些方法都是可行的，如有解决不了的情况，请根据自己的情况对号入座哇！
兼容性可能不太全，以后如果有遇到其他的情况，我会在此篇的文章后补全的；

ios、安卓前端兼容性的更多相关文章

ios、安卓前端兼容性1
2.input框聚焦,ios出现outline或者阴影,安卓显示正常解决方法 input:focus{outline:none} input:{-webkit-appearance: none;} ...
Web前端兼容性指南
一.Web前端兼容性问题一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性屏幕分辨率兼容性跨平台兼容性 1.浏览器兼容性问题第一次浏览器大战发生 ...
H5和PC实现点击复制当前文字的功能，兼容ios,安卓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
WPF C#仿ios 安卓红点消息提示
原文:WPF C#仿ios 安卓红点消息提示先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...
让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<script type="text/javascript" src="/static/js/clipboard.min ...
【原】移动web资源整理(安卓、ios移动端兼容性问题归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...
ios、安卓的兼容性
日期转换成时间戳: 安卓下可以使用 Date.parse(new Date('2019-11-18 12:00:00')) 直接转换,结果为 1574049600000 ios下 Date.parse ...
移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题
这样的箭头用CSS-3实现,整段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
使用axios对安卓或者ios低版本兼容性处理
原因:不支持ES6,无法使用promise 解决办法: 1.安装 es6-promise cnpm install es6-promise --save-dev 2.引入 es6-promise im ...

随机推荐

搭建代理服务器时的笔记，request使用笔记
request 请求笔记: 1.opation中使用form字段传参对应 content-type': 'application/x-www-form-urlencoded',如果想要content ...
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...
W5500 学习开发: W5500学习说明
前言官方已经给了大部分的例子,我只是做一下移植说明这一节看一下如何移植官网程序的DHCP 首先先明确:单片机和W5500通信是通过SPI,所有的数据都是通过SPI接收和发送, 所以,拿到官方源码只 ...
ESA2GJK1DH1K基础篇: 测试APP扫描Air202上面的二维码绑定通过MQTT控制设备(兼容SIM800)
前言此程序兼容SIM800 如果想绑定SIM800,请把其IMEI号,生成二维码,用手机APP扫描. 实现功能概要 APP通过扫描二维码获取GPRS设备的IMEI号,然后设置订阅的主题:device ...
redis之expire命令详解
expire是设置redis过期时间的命令,需要注意的点有以下几点 expire设置过期时间的单位是秒,如设置name的过期时间为1000秒 expire name 1000 超过时间后会自动删除 ...
洛谷p1776宝物筛选
宝物筛选多重背包问题物品数目已知可以枚举每个物品当做01背包来做不过会超时此时需要二进制拆分来优化分解成新的物品再跑一遍01背包即可 //二进制拆分+01背包 //设f[j]表示前i件 ...
K8s容器资源限制
在K8s中定义Pod中运行容器有两个维度的限制: 1. 资源需求:即运行Pod的节点必须满足运行Pod的最基本需求才能运行Pod. 如: Pod运行至少需要2G内存,1核CPU 2. 资源限额: ...
centos里的压缩解压命令tar总结
压缩 tar czvf 压缩文件名称.tar.gz 文件或者目录名称比如:tar czvf backup.tar.gz /etc,把/etc目录打包成文件backup.tar.gz c是打包 z是g ...
caffe解析
Caffe支持CUDA,Caffe和TensorFlow没有给出分布式的版本, 可以使用多gpu,Caffe通过直接在执行指令后面加上-gpu 0,1
【医学】三分钟看懂乳腺BI-RADS分级
“BI-RADS”是指美国放射学会的乳腺影像报告和数据系统(Breast Imaging Reporting and Data System)的缩写.BI-RADS分级法将乳腺病变分为0-6级,用来评 ...