为啥android webview中的css属性会发生变化

Posted 2023-05-07

【中文标题】为啥android webview中的css属性会发生变化

【英文标题】：Why do css properties change in android webview为什么android webview中的css属性会发生变化

【发布时间】：2018-08-08 02:30:57

【问题描述】：

在处理 css 属性时，我发现 android 的 Web 视图行为很奇怪：

当显示包含以下 css 属性的网页时：font-size 和 line-height设置为：

font-size: 20px;
line-height: 35px;

Android 的 webview 将属性更改为：

font-size: 17.4px;
line-height: 30.45px;

为什么？

【问题讨论】：

它可能是字体大小或缩放的额外设置。即使在浏览器中，常规设置、辅助功能设置、显示设置、android 常规字体大小设置等。

How to set text size in WebView in android的可能重复

【参考方案1】：

我找到了答案：

只有 webView 必须在 android 中将文本大小设置为“NORMAL”。像这样：

webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);

【讨论】：

谢谢，我试图找出发生这种情况的原因。顺便说一句，已弃用，使用 webView.getSettings().setTextZoom(100);这将覆盖 android webview 上的系统字体大小以保持正常。

【参考方案2】：

您是否检查了不同分辨率下的页面行为？ CSS中可能定义了@media规则，针对不同的分辨率改变样式，例如：

@media screen and (min-width: 1024px) 
    p 
        font-size:20px;
        line-height:35px
    


@media screen and (max-width: 1023px) 
    p 
        font-size:17.4px;
        line-height:30.45px
    

阅读更多here。

【讨论】：

在没有定义媒体的情况下以元素自身样式设置此属性。在平板电脑和移动 chrome 浏览器中都可以正常工作。但在移动工作中的应用程序出错了！

也试试here