IOS-safari遇到的坑

最新推荐文章于 2019-12-24 11:37:22 发布

Z-Hisen

最新推荐文章于 2019-12-24 11:37:22 发布

阅读量358

点赞数

分类专栏：前端开发之Safari浏览器（坑）文章标签： ios 浏览器解决方案

前端开发之Safari浏览器（坑）专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题一：横竖屏切换时会缩放字体大小，导致布局变化

解决方案：reset.css添加样式

@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}
@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:none}}
@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:none}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:none}}

问题二：当导航条百分比布局且浏览器上下滑动时，会导致导航条被压缩，样式回流

解决方案：js添加代码

/*阻止ios回弹*/
function restoreEvent(ev) {
var _target = ev.target,
_ss = $(_target).parents().slice(-3)[0],
_point = ev.touches[0],
_top = _ss.scrollTop;

// 什么时候到底部
var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;

if(_ss.id === 'smooth_scroll'){
// 到达顶端
if(_top === 0) {
// 阻止向下滑动
if(_point.clientY > Y) {
ev.preventDefault();
} else {
// 阻止冒泡
// 正常执行
ev.stopPropagation();
}
} else if(_top === _bottomFaVal) {
// 到达底部
// 阻止向上滑动
if(_point.clientY < Y) {
ev.preventDefault();
} else {
// 阻止冒泡
// 正常执行
ev.stopPropagation();
}
} else if(_top > 0 && _top < _bottomFaVal) {
ev.stopPropagation();
}
}
}