写在前面

本来记录在印象笔记中,但放着老是不看,为加深印象以及搜索方便,立一文统一记录移动端的兼容性问题

前人总结

司徒正美-mobileHack

总结几个移动端 H5 软键盘的大坑

input 中输入不要有空格

onChange(replace(/\s+/g, '')

1
<input onChange={ onChange(e.target.value.replace(/\s+/g, ''))  } />

input 去除 ios 端输入法首字母大写状态

1
<input type="text" autocapitalize="off" autocorrect="off" />

css 一行省略

普通版本

1
2
3
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

有赞版本

1
2
3
4
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

CSS 多行省略

1
2
3
4
5
6
-webkit-line-clamp: 3; // 文本行数
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;

ios 使用 border-radius 时失效

原因:ios 端,该元素使用 transform 属性会导致 border-radius 失效

解决方法:在使用动画效果(使用 transform)元素的上一级的 css 上加上以下属性:

1
-webkit-transform: rotate(0deg);

开发H5营销页面遇到的问题

ios端不能自动播放音乐、视频(但之前看过一个网易云音乐的 H5 能自动播放音乐)

微信里打开的H5不支持点击下载,需要长按保存

ios 端高度超过一屏,input 输入完后不回弹

这个问题老生常谈,但目前我的 iPhone X 手机 ios 15系统未遇到这种情况,而 iPhone 7 手机遇到了这个问题。猜测是老的手机用的 webview 的 bug,解决方法是在监听 input 的 onblur 事件,在失去焦点的时候,拿到它滑动后的高度,使用 window.scrollTo 回到原来的 scrollHeight

如代码:

1
2
3
4
5
6
7
8
9
10
<input
type="text"
onBlur={() => {
setTimeout(() => {
if (util.system.ios) {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}
}, 100);
}} />

看网上答疑:在 IOS12 ,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不会到原位,导致键盘原来所在位置是空白的

安卓手机键盘弹出,希望表单跟着向上移动

ios 手机会跟着选中目标后滚动到中间位置,但是安卓系统不会,但你点击下方的表单时,表单不会向上滚动,键盘弹出后会遮住目标表单

安卓中的可视高度=我们看到的页面高度+软键盘的高度,而 IOS 的可视高度与软键盘无关

在 componentDidMount 或者 useEffect 中监听 resize,以 函数式组件为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const App = () => {
const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
useEffect(() => {
window.addEventListener("resize", resizeWindow)
return () => {
window.removeEventListener("resize", resizeWindow)
}
}, [])
const resizeWindow = () => {
if (util.system.android) {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
const activeElement = document.activeElement;

if (resizeHeight < originHeight) {
if (activeElement && (activeElement.tagName === 'INPUT')) {
setTimeout(() => {
activeElement.scrollIntoView({ block: 'center' })
}, 100)
}
}
}
}
return (
<div id="app"></div>
)
}

思路如下:

在组件初始化时监听 resize 事件,如果在 android 系统的话,获取文档调整后的高度以及选择的组件,通过对比原先高度,如果文档调整后的高度小于原先的高度,意味着有键盘弹出,我们就使用scrollIntoView,让目标选中组件滚动到页面中间

更多H5软键盘兼容性问题可以看看这这个帖子:可能这些是你想要的H5软键盘兼容方案

如何实现页面刷新后不定位到之前的滚动位置

history.scrollRestoration

1
2
3
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}

源自:https://www.zhangxinxu.com/wordpress/2022/05/history-scrollrestoration/

检测 passive 是否支持

1
2
3
4
5
6
7
8
9
10
11
var passiveSupported = false;

try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
}
});

window.addEventListener("test", null, options);
} catch(err) {}

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

Input 几个有趣的属性

1
2
3
4
5
<input
autoComplete="false"
autoCorrect="off"
autoCapitalize="off"
autoFocus=false/>

autoComplete="false":自动记录输入的值

浏览器不允许为此字段自动输入或选择一个值

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/autocomplete

autoCorrect="off":自动纠错

autoCapitalize="off":自动大小写

控制用户输入/编辑文本输入时文本输入是否自动大写,以及如何自动大写

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/autocapitalize

autoFocus=false:自动对焦

自动对焦

微信开发

ios右上角消失

1
2
3
4
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('showOptionMenu');
});

https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1_JS%E6%8E%A5%E5%8F%A3

微信开发

最新版的微信已经不支持通过 debugx5.qq.com 打开 vconsole 了。要调试H5可以通过chrome远程:

① 把手机和电脑用usb连起来
② 在手机微信中访问 http://[喵喵] debugxweb.qq.com/?inspector=true
③ 在电脑浏览器中访问 chrome://inspect/#devices

隐藏微信网页右上角的按钮

1
2
3
4
5
6
7
8
9
10
11
12
document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {`
// 通过下面这个API隐藏右上角按钮`
WeixinJSBridge.call('hideOptionMenu');

});
document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {

// 通过下面这个API显示右上角按钮`

WeixinJSBridge.call('showOptionMenu');

});

https://www.jianshu.com/p/d7f5f5131783

input ios端高度问题