css兼容不同设备的问题整理(移动端、PC端、iOS端与android端)

阿酷tony
阿酷tony 这家伙很懒,还没有设置简介

1 人点赞了该文章 · 2171 浏览

我是阿酷tony,从事视频直播行业近十年,方向:视频直播、微信直播、视频加密技术、流媒体环境、网页视频播放器,组建了一个交流群,点击加入一起交流

1. h5底部输入框被键盘遮挡问题 
var oHeight = $(document).height(); //浏览器当前的高度

$(window).resize(function(){

if($(document).height() < oHeight){

$("#footer").css("position","static");
}else{

$("#footer").css("position","absolute");
}

});
2.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
3.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
4.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
5.消除 transition 闪屏
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
6.iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉      this.value = this.value.replace(/\u2006/g, '');

7.禁止ios和android用户选中文字
-webkit-user-select:none
8.fixed定位缺陷
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方案: 可用iScroll插件解决这个问题

发布于 2021-05-20 18:24

免责声明:

本文由 阿酷tony 原创发布于 SaaS点评网_SaaS软件超市 ,著作权归作者所有。

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

暂无评论

已收录至专栏

帮选软件
All Rights Reserved Powered BY SaaS点评网 © 2025 浙ICP备2021004744号