webview 问题小记

最新推荐文章于 2023-12-08 14:38:53 发布

原创最新推荐文章于 2023-12-08 14:38:53 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文记录了WebView在Android和iOS设备上遇到的字体大小和布局问题。在Android设备上，WebView的默认字体大小可能受系统设置影响，导致1rem单位不准确。而在部分Android设备的垂直布局中，line-height配合transform可以解决布局问题。对于iOS刘海屏，WebView在安全区域内可能会有顶部间隙，通过设置body高度为100vh可确保内容贴边。

webview默认字号

在有些 Android 手机上，浏览器或 webview 的默认字体是随着系统设置的字体改变的。
这样就会导致默认字体大于或小于 16px。直接表现为：
html的font-size设置为40px 但 1rem != 40px ， 1rem = 40px*(defaultFontSize / 16)

计算defaultFontSize的方法：

const d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = 'none';
const head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
const defaultFontSize = parseFloat(window.getComputedStyle(d,   null).getPropertyValue('width')) || 16;

⚠️: 不止是设置系统字体会造成这个现象，有个三星手机没有设置系统字体，1rem = 17.6px,还不知道是什么导致的

部分安卓line-heigjt 垂直布局中：

.txt::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: 1px;
}
----------------------------
.txt { 
    line-height: normal
}
----------------------------
<div class="solution" style="height: 32px; line-height: 32px; font-size: 20px; transform: scale(0.5, 0.5); transform-origin: left top;">
  <span>hot 热门</span>
</div>

⚠️ ：有遇见过一种方案不好用，伪元素+transform+normal好用了