一、ios端的坑
症状:软键盘弹出或者收起,弹窗自动调整定位不准的问题
原因:第一次键盘唤起慢或其它
$(window).on('resize', function () {
$(window).scrollTop(0);
});
$(document.body).on('focusout', 'input', function () {
$(window).scrollTop(0);
});
$(document.body).on('focusin click', 'input', function () {
var target = this;
setTimeout(function () {
document.body.scrollTop = document.body.scrollHeight / 4;
}, 100);
});
症状:safari浏览器会将一些后渲染dom的字体变大
原因:Mobile Safari automatically scales text if it thinks the text will render too small
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
二、uc浏览器
症状:渲染出一些可搜索词,点击会新开页
原因:有些词被自动渲染成了这副鬼--> <a keyword-hyperlink href="#">XXX</a>
立即干掉它:
.removeProp('keyword-hyperlink').attr('href', 'javascript:void(0)').css('color', '#666');
三、微信浏览器
症状:后退没有刷新页面
解决办法:
//解决微信内置浏览器回退页面不刷新的bug
window.onpageshow= function(e){
if (e.persisted || window.performance && window.performance.navigation.type == 2) {
var _url = window.location.href;
if(_url.indexOf('?') < _url.indexOf('=') ){
_url += '&';
}else{
_url += '?';
}
window.location.href = _url +'time='+((new Date()).getTime());
}
};
四、iphoneX 安全距离设置
@mixin adaptiveIphoneX($direction, $isBoxingSizingSet: true) {
@supports (padding: max(0px)) {
@if ($isBoxingSizingSet) {
box-sizing: content-box !important;
}
@if $direction == 'bottom' {
padding-bottom: constant(safe-area-inset-+$direction) !important;
padding-bottom: env(safe-area-inset-+$direction) !important;
}
@else if $direction == 'top' {
padding-top: constant(safe-area-inset-+$direction) !important;
padding-top: env(safe-area-inset-+$direction) !important;
}
@else if $direction == 'left' {
padding-left: constant(safe-area-inset-+$direction) !important;
padding-left: env(safe-area-inset-+$direction) !important;
}
@else if $direction == 'right' {
padding-right: constant(safe-area-inset-+$direction) !important;
padding-right: env(safe-area-inset-+$direction) !important;
}
}
}
网友评论