前端移动端的兼容性整理总结

前端开发环境 生产环境搭建 ubuntu 前端开发环境 vim前端开发环境

1.阻止屏幕旋转时字体自动调整
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

2.使用click会出现绑定点击区域闪一下的情况,解决:给该元素一个样式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);

3.ios android判断;
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//console.log($(‘.input_pass’).css({‘font-size’:’100%’,’letter-spacing’:’19px’,’top’:’0px’}));
} else if (/(Android)/i.test(navigator.userAgent)) {
$(‘.pwd_outer .input_pass’).css({‘fontSize’:’24px’,’letter-spacing’:’22px’});
} else {
//console.log(‘我是其他’);
};

4.重新定义滚动条的样式:
webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。
::-webkit-scrollbar {width: 12px;}定义滚动条的宽度;
::-webkit-scrollbar-track {background-color: #eaeaea;border-left: 1px solid #ccc;}定义滚动条的背景
::-webkit-scrollbar-thumb {background-color: #ccc;}上下箭头
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
::-webkit-scrollbar-thumb:active{
background-color:#333;
}

5.textarea这个标签,具有默认样式
-webkit-appearance: none; 通过这个属性可以取消;

6.指定下拉刷新获取高度的兼容性,低版本的安卓(小米)不支持touchend事件;我们写在touchmove事件里面;
var scroll=document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离
var win=document.documentElement.clientHeight||document.body.clientHeight;//窗口的高度
var scrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight;//文档总高度

laravel 前端开发环境 淘宝前端本地开发环境 前端开发环境的搭建

» 本文来自:前端开发者 » 《前端移动端的兼容性整理总结》
» 本文链接地址:https://www.rokub.com/5825.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!