移动端疑难杂症(持续更新)
写在前面
本来记录在印象笔记中,但放着老是不看,为加深印象以及搜索方便,立一文统一记录移动端的兼容性问题
前人总结
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 | overflow: hidden; |
有赞版本
1 | display: -webkit-box; |
CSS 多行省略
1 | -webkit-line-clamp: 3; // 文本行数 |
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 | <input |
看网上答疑:在 IOS12 ,微信版本 v6.7.4 及以上,输入框获取焦点,键盘弹起,页面(webview)整体往上滚动,当键盘收起后,不会到原位,导致键盘原来所在位置是空白的
安卓手机键盘弹出,希望表单跟着向上移动
ios 手机会跟着选中目标后滚动到中间位置,但是安卓系统不会,但你点击下方的表单时,表单不会向上滚动,键盘弹出后会遮住目标表单
安卓中的可视高度=我们看到的页面高度+软键盘的高度,而 IOS 的可视高度与软键盘无关
在 componentDidMount 或者 useEffect 中监听 resize,以 函数式组件为例
1 |
|
思路如下:
在组件初始化时监听 resize 事件,如果在 android 系统的话,获取文档调整后的高度以及选择的组件,通过对比原先高度,如果文档调整后的高度小于原先的高度,意味着有键盘弹出,我们就使用scrollIntoView,让目标选中组件滚动到页面中间
更多H5软键盘兼容性问题可以看看这这个帖子:可能这些是你想要的H5软键盘兼容方案