安卓和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;
}
作者:一个写前端的姑娘
链接:https://www.jianshu.com/p/860f7e9470c9
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1.JavaScript中的Date对象在Safari与IOS中的坑
var date =new Date("2018-07-25 19:25");
- 1
这段代码是获得字符中指定的日期,它Firefox、Chrome中就能运行,但是放在Safari就会报错,错误是NaN
解决办法:
//将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式
var value = '2018-07-25 19:25';
value = value.replace(/\-/g, "/");
- 1
- 2
- 3
2.禁止图片点击放大
部分安卓手机点击图片会放大,如需要禁止放大,只需要设置css属性
img{
pointer-events: none;
}
- 1
- 2
- 3
这个会让img标签的点击事件失效,如果想要给图片添加点击事件就要给上面再写一层
3.禁止页面缩放
这样设置在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();
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
4.禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no">
- 1
5.禁止复制、选中文本
设置CSS属性 -webkit-user-select:none
- 1
6.JS跳转手机QQ的聊天页面
Android: URL
mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web
- 1
iOS: URL:
mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web
- 1
7.一些情况下对非可点击元素如(label,span)监听点击事件,不会在IOS下触发,css增加cursor:pointer就搞定了(未测试)
8.上下拉动滚动条时卡顿、慢(未测试)
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
- 1
- 2
- 3
- 4
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
9.清除button,input,a标签的默认样式
a:hover, a:active,button,input:focus{ outline: none; border: none; }
======================
问题1:移动端项目要求是全屏滚动,用的是 fullpage,上下滚动时安卓正常,苹果手机浏览器上下滚动时会出现底色问题
解决方案:
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});
1
2
3
4
问题2:移动端用video标签用苹果手机在浏览器上打开和安卓机上打开是不一样的
解决方案:
苹果机默认打开video是全屏的,所以要阻止默认全屏,加上下面这四个属性就可以啦
<video src="#" webkit-playsinline='true' playsinline='true' x5-playsinline x-webkit-airplay="allow" > </video>
webkit-playsinline -----针对I0S9
playsinline------针对IOS10和11 IOS微信浏览器支持小窗内播放
x-webkit-airplay="allow"----------启用AirPlay支持
x5-playsinline----------x5内核video
1
2
3
4
5
6
7
问题3:移动端隐藏浏览器的地址栏和菜单栏
解决方案:
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />
————————————————
版权声明:本文为CSDN博主「海是最蓝的天」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/li1342392184/article/details/88044732
===================
1: apple-mobile-web-app-capable (是否隐藏苹果手机工具栏和菜单栏)(是否苹果手机全屏)
No:默认样式,不隐藏
Yes:屏蔽工具栏和菜单栏;全屏显示
2: apple-mobile-web-app-status-bar-style(苹果手机状态栏如何显示)
Black:显示为黑色
black-translucent:显示为黑色并半透明(灰色)(可能会遮盖20到40px的页面顶部内容)
default:默认值(白色)
3: format-detection
Telephone:是否识别为手机号 yes/no
Email:是否识别为电子邮箱 yes/no
Adress:是否识别为地址 yes/no 注:当为yes时iPhone会自动跳转到地图
写法:
· meta name="format-detection" content="telephone=no"
· meta name="format-detection" content="email=no"
· meta name="format-detection" content="adress=no"
或者
meta name="format-detection" content="telephone=no,email=no,adress=no"
4: HandheldFriendly: 设备优化,针对一些老的不识别viewport的浏览器,比如黑莓
Yes/no
5: viewport:设置并规范webapp在手机浏览器中的可视区域
width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
常规写法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关于苹果手机webapp的设置
1: apple-mobile-web-app-capable设置为yes
允许苹果机通过safari添加主屏按钮到主屏幕上
2:设置<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
设置苹果webapp的图标
3: <link rel="apple-touch-startup-image" href="/startup.png"/>
设置当网页被设置为webapp时,打开此webapp时启动时的图片
==================
一:全局
1.阻止弹出层下面的页面滚动
给弹出层的最外层标签上加@touchmove.prevent
二:ipone
1.readonly与disabled
在iphone下,输入框为readonly时,点击依然会获得焦点;
建议设为disabled
2.button在iphone下会有默认自带的样式和圆角
-webkit-appearance: none;清除自带样式
3.button,a,img等点击时会高亮,去除方式如下:
-webkit-tap-highlight-color:rgba(255,255,255,0);
4.不兼容new date("2017-09-08 00:00:00") 这种写法,需要把‘-’换成‘/’:
var date="2017-09-08 00:00:00"
三:android
1.输入框获取焦点时,软键盘会遮挡,主动触发让输入框上移
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } }) }