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 安卓
<!--js copy事件--><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 ...
随机推荐
- 前端(4)BOM与DOM
前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...
- postman常用功能汇总（基础必备）
下载安装 下载地址:https://www.getpostman.com/downloads/ 安装:略 接口测试详解 包含get,post(k-v,json,上传文件,cookie) 参考:http ...
- java类uuid源码分析
通用唯一识别码(英语:Universally Unique Identifier,简称UUID)是一种软件建构的标准,亦为自由软件基金会组织在分散式计算环境领域的一部份.UUID的目的,是让分散式系统 ...
- [KCOJ20170214]又一个背包
题目描述 Description 小W要去军训了!由于军训基地是封闭的,小W在军训期间将无法离开军训基地.所以他没有办法出去买他最爱吃的零食.万般无奈的小W只好事先买好他爱吃的零食,装在背包里带入军训 ...
- dubbo-zookeeper demo解析图
- 安装PyInstaller失败
pip install PyInstaller 报错: 后运行: 指定安装源进行安装: pip3 install pyinstaller -i https://pypi.doubanio.com/si ...
- HBase快照迁移数据失败原因及解决办法
目录 目录 1 1. 背景 1 2. 环境 1 3. 执行语句 1 4. 问题描述 1 5. 错误信息 2 6. 问题原因 3 7. 解决办法 4 1. 背景 机房裁撤,需将源HBase集群的数据迁移 ...
- Redis有哪些数据结构
String 这应该是应用最广泛的了,简单的 key-value 类型.value 不仅可以是 String,也可以是数字.还可以享受 Redis 的定时持久化(可以选择 RDB 模式或者 AOF 模 ...
- 如何计算假设检验的功效（power）和效应量（effect size）？
做完一个假设检验之后,如果结果具有统计显著性,那么还需要继续计算其效应量,如果结果不具有统计显著性,并且还需要继续进行决策的话,那么需要计算功效. 功效(power):正确拒绝原假设的概率,记作1-β ...
- sharding-jdbc 分布式数据库中间件
小编今天在做Sharding-jdbc时出现了一些问题,就上网百一百,发现网上的sharding-jdbc的参考是挺少的,唉还是要继续学习看文档. Sharding-jdbc介绍 Sharding-J ...