浏览器问题收集

380 阅读1分钟

1、移动端chrome,h5页面滑动时可能会隐藏地址栏

这样会导致window.innerHeight变化,如有用到该值,需要注意!
如判断当前是否有键盘弹出,不要用window.innerHeight,而是用document.documentElement.clientHeight || document.body.clientHeight;

blog.csdn.net/cc188688768…

2、编辑区保留光标但阻止弹出键盘

input或textarea可以通过:

dom.focus();
setTimeout(() => {
    dom.readOnly = false;
}, 200);
dom.readOnly = true;

但div contenteditable不行,知道的帮忙回复下哇

3、表情展示异常

☺️ Smiling Face

image.png

pc chrome展示如上,在安卓手机端是ok的。

无意中发现通过设置字体样式,可以让表情展示正常

font-family: textRegular;

原因:

真实的使用情况还有所不同,目前主流的操作系统都内置了 emoji 字体,例如苹果的 MAC OS,iOS,安卓以及Windows 10等。虽然内置了 emoji 字体,但并不是每个 emoji 字符都是彩色图形,例如笑脸:☺️。我们当然希望笑脸变成彩色效果,那么就需要 css 额外设置 emoji 字体样式。

www.zhouzh.tech/posts/5f8e2…