IOS-safari遇到的坑

来源：互联网发布：淘宝压缩羽绒服编辑：程序博客网时间：2024/06/05 18:57

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

解决方案：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();
}
}
}

问题三：JS动态添加<audio>音频且添加autoplay属性时，音频不会自动播放

解决方案：js添加代码

插入音频标签后，需使用play()方法触发自动播放

0 0