Android WebView iFrame 字体缩放

Posted

技术标签:

【中文标题】Android WebView iFrame 字体缩放【英文标题】:Android WebView iFrame font scaling 【发布时间】:2018-01-16 03:43:43 【问题描述】:

我有一个应用程序,它基本上只是加载一个网站来显示该信息。在网站内,我有一个加载事件日历的 iframe。

在计算机上查看网站(通过 Chrome),事件日历看起来与它应该的完全一样(是的,我知道字体小得离谱)。

通过 android 应用在 FireTV Stick 上查看网站时,iFrame(活动日历)中的字体会放大。

我注意到对于 FireTV,当分辨率为 1920x1080 时,实际显示分辨率为 960x540(将浏览缩小到会产生相同的效果)@see Screen Size and Resolution

Chrome 中的图像(正确显示) FireTV WebView(不正确) 我还阅读了 Font-Boosting,这最初是我认为的问题所在,但我已经消除了这一点,因为没有任何技术可以“禁用”它(html * max-height: 99999999px 等。 .)

我觉得问题在于我在 Android 应用程序中调用 WebView 的方式以及正在应用的设置。我几乎可以肯定我在那里遗漏了一些可以解决这个问题的东西。这是我的 WebView 设置:

mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();

webSettings.setjavascriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setSupportZoom(true);
webSettings.setDefaultFontSize(12);
mWebView.setInitialScale(1);

编辑 1: 好的,我发现它不仅是 iFrame 正在扩大,而且是 FireTV 上的所有内容(这显然是一项功能)。它们的显示分辨率 (dp) 为 960x540。似乎没有办法制作 1920x1080 的东西,但是当我通过 Rise Vision 的“My Rise Player”应用程序显示 iframe 时,一切看起来都正常。

他们是如何找到一种方法让 FireTV 上的图像显示为 1920x1080?

如果 Rise Vision 的开发团队中的任何人愿意发表评论并为我指明正确的方向,我将不胜感激!

【问题讨论】:

您是否尝试过使用 webSettings.setTextZoom() 来避免自动缩放? @altskop 这绝对是朝着正确方向迈出的一步。我添加了它并将其设置为 40(就像现在用于测试的硬编码一样),它更正了一些文本,但不是全部。更正的文本使用 vh 来调整字体大小。使用直接 px 的文本未更正,仍按比例放大。有什么想法吗? 【参考方案1】:

解决方案相当简单。我只需要将这些值设置为100

mWebView.getSettings.setTextZoom(100);
mWebView.setInitialScale(100);

感谢@altskop 让我朝着正确的方向前进

对于那些想知道其余代码的人,请看:

WebView mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();

mWebView.setWebViewClient(new WebViewClient() 
    @Override
    public void onPageFinished(WebView view, String url) 
        Log.d(TAG, "Finished Loading.");
    

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) 
        view.loadUrl(url);
        return true;
    
);

webSettings.setJavaScriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webSettings.setTextZoom(100);

mWebView.setInitialScale(100);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl("http://your.url.com");

【讨论】:

以上是关于Android WebView iFrame 字体缩放的主要内容,如果未能解决你的问题,请参考以下文章

为啥 Android WebView 不加载 youtube HTML5 iframe 视频?

iFrame allowFullScreen 属性在 Android WebView 上不起作用

Android webview 无法渲染通过 iframe 嵌入的 youtube 视频

如何在 Android webview 中居中我的 HTML iframe?

android webview-android的webview怎么修改网页字体颜色和背景

android webview youtube iframe 就像在 feedly 中一样?