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. cordova 一个将web应用程序封装成app的框架

    cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建. 1.首先你需要下载几样东西 1.jdk. 2.andr ...

  2. 写入Txt文本信息

    public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { L ...

  3. 【java】定时任务停止时间设置

    我的需求:每天9点至20点运行 解决办法:@Scheduled(cron = "0 * 9,10,11,12,13,14,15,16,17,18,19 * * ?") 解释:  逗 ...

  4. MAC上配置idea环境时排查问题

    现象:没有使用走公司maven仓库的setting.xml文件时,只有公司内部依赖 没有找到在idea的maven配置中指定 公司setting.xml后,所有的文件都提示找不到 解决办法:把公司se ...

  5. Ql004(母牛的故事)

    一,看题目 1,这个虽然我不想说,但是我确实不会,但是我的意思是你可以不会但是不能每次都不会那咋办? 二,看题解 1,你得大概知道这个东西是考啥的(虽然这个东西提前给你说了是d递归),但是考试肯定没人 ...

  6. Oracle EBS 11i x86-64 的预安装

    1.EBS11i的软件组成,28个zip包 Oracle ApplicationsOracle Application with NLSOracle Database technology stack ...

  7. three.js 加载STL文件

    注意: TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径 比如: 直接代码咯 <!DOCTYPE html&g ...

  8. C语言博客作业04—数组

    0.展示PTA总分(0----2) 展示3张关于"数组题目集"分数截图. 1.本章学习总结(2分) 1.1 学习内容总结 整理数组这章学习主要知识点,必须包含内容有: (1)数组查 ...

  9. React_01_ECMAScript6

    ECMAScript6 1.ES6简介 1.1.什么是ES6 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目 ...

  10. xcode选项Build Active Architecture Only的作用

    Build Active Architecture Only 设置: 设置为NO的时候,会导致react-native项目启动失败npx react-native run-ios 根据错误信息 bui ...