常见问题-4
2023-03-18 本文已影响0人
skoll
伪类失效
<body ontouchstart></body>
1 .给body注册一个空事件即可
忽略自动识别
1 .当页面上的内容包含了手机号，邮箱，会自动转换成可点击的链接
<p>13192733603</P>
2 .解决方案
<!-- 忽略浏览器自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略浏览器自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">
优势
1 .在方案上给出更好的建议，比如实现方案。更加高级的展示
input 失焦之后页面没有回弹
1 .出现条件
1 .ios微信内部浏览器
2 .页面高度很小
3 .聚焦时，页面需要网上移动的时候
2 .解决方法：input focus的时候，获取到滚动条的高度，等blur的时候，在重新设置一下滚动条的高度
禁止长按
1 .长按保存图片，可以
2 .长按保存文字，不可以，因为会出现选择框，导致字的上面有选中的操作，影响页面美观
3 .解决方案
image{
pointer-events:none
}
//这个不会用到的
div{
-webkit-user-select:none
//禁止选择文字
}
div{
-webkit-touch-callout:none
//禁止长按呼出菜单
}
滑动不流畅
1 .出现情况，在ios设备中，滚动盒子使用了overflow:auto/scroll
2 . 优化逻辑
div{
-webkit-overflow-scrolling:touch
}
屏幕旋转为横屏的时候，字体大小会变
1 .这个要记住，真的遇到过
* {
-webkit-text-size-adjust: 100%;
}
2 .text-size-adjust 主要就是用于移动端，确切的是ios移动端
3 .iphone 和ipaid 中默认设定中，横屏的时候字体会变大。手机横屏的时候图片是维持原本的大小的，但是文字大小会增加。也许是考虑到横屏文字数量变多，影响阅读，所以让字体变大
4 .text-size-adjust 绝对不能设置为none。
5 .竟然有人为了修复一些bug做了一个chorme插件。不过这个在国内是行不通的
滑动穿透
1 .最简单的办法就是阻止默认行为。也就是出现遮罩的时候，这样操作
<div class="mask" @touchumove.self.prevent></div>
//执行这个绑定的函数，当出现展开遮罩的时候函数返回false,不执行这个
