移动端疑难杂症(持续更新)
写在前面
本来记录在印象笔记中，但放着老是不看，为加深印象以及搜索方便，立一文统一记录移动端的兼容性问题
前人总结
input 中输入不要有空格
onChange(replace(/\s+/g, '')
<input onChange={onChange(e.target.value.replace(/\s+/g, ""))} />
input 去除 ios 端输入法首字母大写状态
<input type="text" autocapitalize="off" autocorrect="off" />
css 一行省略
普通版本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
有赞版本
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
CSS 多行省略
-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 上加上以下属性：
-webkit-transform: rotate(0deg);
开发H5营销页面遇到的问题
ios端不能自动播放音乐、视频（但之前看过一个网易云音乐的 H5 能自动播放音乐）
微信里打开的H5不支持点击下载，需要长按保存
ios 端高度超过一屏，input 输入完后不回弹
这个问题老生常谈，但目前我的 iPhone X 手机 ios 15系统未遇到这种情况，而 iPhone 7 手机遇到了这个问题。猜测是老的手机用的 webview 的 bug，解决方法是在监听 input 的 onblur 事件，在失去焦点的时候，拿到它滑动后的高度，使用 window.scrollTo 回到原来的 scrollHeight
如代码：
<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，以 函数式组件为例
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
if (history.scrollRestoration) {
history.scrollRestoration = "manual";
}
源自：https://www.zhangxinxu.com/wordpress/2022/05/history-scrollrestoration/
检测 passive 是否支持
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 几个有趣的属性
<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右上角消失
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
隐藏微信网页右上角的按钮
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端高度问题