1.日期兼容性

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、安卓前端兼容性的更多相关文章

  1. ios、安卓前端兼容性1

    2.input框聚焦,ios出现outline或者阴影,安卓显示正常 解决方法 input:focus{outline:none} input:{-webkit-appearance: none;} ...

  2. Web前端兼容性指南

    一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...

  3. H5和PC实现点击复制当前文字的功能，兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...

  5. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  6. 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)

     meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...

  7. ios、安卓的兼容性

    日期转换成时间戳: 安卓下可以使用 Date.parse(new Date('2019-11-18 12:00:00')) 直接转换,结果为 1574049600000 ios下 Date.parse ...

  8. 移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题

    这样的箭头用CSS-3实现,整段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. 使用axios对安卓或者ios低版本兼容性处理

    原因:不支持ES6,无法使用promise 解决办法: 1.安装 es6-promise cnpm install es6-promise --save-dev 2.引入 es6-promise im ...

随机推荐

  1. linux服务器NAT后无法在内网通过外部IP访问内部服务的问题

    场景一: 将外网访问192.168.100.10的80端口转发到192.168.75.5:8000端口. # iptables -t nat -A PREROUTING -d 192.168.100. ...

  2. RabbitMQ六种队列模式-工作队列模式

    前言 RabbitMQ六种队列模式-简单队列RabbitMQ六种队列模式-工作队列 [本文]RabbitMQ六种队列模式-发布订阅RabbitMQ六种队列模式-路由模式RabbitMQ六种队列模式-主 ...

  3. 28 让树莓派开机“说”出自己的IP地址

    http://shumeipai.nxez.com/2019/02/02/analogue-audio-redux.html 树莓派音频口底噪消除的方法

  4. Windbg Command Browser(命令浏览器)窗口的使用

    命令浏览器窗口显示并存储调试器命令的文本结果.此窗口创建命令引用,使您可以查看特定命令的结果,而无需重新输入该命令.命令浏览器窗口还提供了对存储的命令的导航,因此您可以比使用调试器命令窗口更快地访问命 ...

  5. hdu5111 树链剖分，主席树

    hdu5111 链接 hdu 思路 先考虑序列上如何解决. 1 3 2 5 4 1 2 4 5 3 这个序列变成 1 2 3 4 5 1 3 5 5 2 是对答案没有影响的(显然). 然后查询操作\( ...

  6. 【JZOJ5738】【20190706】锁屏杀

    题目 $n \le 2000 $ 题解 \(B\)的数字可以对1440取模,对三个图分别进行\(dp\)即可 时间复杂度\(O(n\times 1440 \times 10)\) Code #incl ...

  7. 深入js系列-类型(null)

    首先null是表示什么状态呢 这个是需要和上篇的undefined做一个区分 undefined 从未赋值 非关键词(也就是可以定义为变量名或者赋值给它) null 曾经赋值.目前没值 关键词 typ ...

  8. ES6-Generator基础用法

    Generator简介: 生成器,本身是函数,执行后返回迭代对象,函数内部要配合yield使用Generator函数会分段执行,遇到yield暂停. 使用Generator注意点:function 和 ...

  9. php获取客户端公网ip代码

    <?php /*如果是本地服务器获取客户端的ip地址是 127.0.0.1 如果是域名服务器获取客户端的是公网ip地址*/ function get_client_ip() { $ipaddre ...

  10. Unity开发：5.0+版本标准资源包无内置问题

    一.问题如下: 在Unity中,一般都会内置有基础的资源包,可以在Assets->Import Package中,点击其下的子项进行导入: 但是我发现,5.0版本与之前的4.x版本相比,安装包变 ...