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 ...
随机推荐
- 第10节-BLE协议链路层(LL)
本篇博客的学些要结合书籍<低功耗蓝牙开发权威指南,Robin Heydon著>第7章,实际上这书只是对蓝牙原版协议的简化.摘要. 回顾以前学过的<BLE协议各层的形象化理解>和 ...
- 201671010459 张旭辉 实验十四 团队项目评审&课程学习总结
项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 作业学习目标 (1)掌握软件项目评审会流程(2)反思总结课程学习内容 github仓库地址链接 [Git ...
- 08-C#笔记-判读语句
同C++ 支持if.switch.?: 不同之处 1. switch case支持字符. 参考: http://www.runoob.com/csharp/csharp-switch.html htt ...
- JavaScript词法作用域—你不知道的JavaScript上卷读书笔记(一)
前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...
- windows下socket编程实现client和server双向通信
服务端代码server.c // server.cpp : Defines the entry point for the console application. // #include <s ...
- 第10组 Beta冲刺(3/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...
- log4net按级别写到不同文件
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...
- [Gamma阶段]展示博客
水哥牛X团队[Gamma阶段]展示博客 微信小程序搜索"小小易校园"即可体验 项目愿景 想参加竞赛,锻炼自己,却找不到合适的队友 想进行实习,体验工作,每天不得不翻遍吐槽版的几百条 ...
- pytest新版本(5.3.2)中收集测试方法规则不支持以test结尾的方法
pytest新版本(5.3.2)中收集测试方法规则不支持以test结尾的方法,只能命名为以test开头,否则不能识别到
- 二叉树遍历(前序、中序、后序)-Java实现
一.前序遍历 访问顺序:先根节点,再左子树,最后右子树:上图的访问结果为:GDAFEMHZ. 1)递归实现 public void preOrderTraverse1(TreeNode root) { ...