如何在具有适合所有设备的屏幕的 Webview 中显示网页的某些部分

Posted 2023-05-07

【中文标题】如何在具有适合所有设备的屏幕的 Webview 中显示网页的某些部分

【英文标题】：How to show Certain Part of WebPage inside Webview With Fit Screen to All Devices

【发布时间】：2012-11-10 12:45:41

【问题描述】：

我想在 WebView 中显示网页。到此为止还好。

但我有网页（如下所示），我想要其中的某些部分。我的意思是在所有设备的适合屏幕模式下应该只看到左上角。

自从过去两三天以来，我一直在解决这个问题。

我想要什么：我想显示网页的左上角以显示在 Webview 中，无论策略是使用缩放还是任何其他选项，但它应该适合所有设备的屏幕.

还有一件事我不能更改网页的源代码，因为它是固定的。 我必须通过代码自己管理。

我尝试了什么：我参考了 *** 链接，但没有运气。

这是我的代码。 ：

            WebView wv;
        wv = (WebView) findViewById(R.id.webview_MyPoops);
        wv.getSettings().setjavascriptEnabled(true);

        // wv.setInitialScale(185);

        // wv.setInitialScale(30);
        String URL = "MY_LINK";

        wv.loadUrl(URL);

        WebSettings webSettings = wv.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);

我正在设备中显示完整的网页。

它在我的 LG 设备（分辨率为 480*800）中运行良好，但在大型设备或 Galaxy Tab2 等标签中，左上角的图像非常小，屏幕的所有其他区域只是背景网页。

下面是运行上述代码后 Galaxy Tab2 的截图。 请给你任何我缺乏的建议。提前致谢。

【问题讨论】：

你能分享从 Galaxy Tab2 生成的输出吗？

试试这个并检查settings.setSupportMultipleWindows(true);

添加了galaxy tab2截图

@Robinhood：已经尝试过，但没有运气

如果网页是由您自己创建的，那么我建议最好使用 webserivce 而不是网页，通过 webserivce 传递所有需要的数据，在布局中显示地图和其他内容。

【参考方案1】：

尝试使用此代码为您完成这项工作。

webview.setInitialScale(getScale()); 



private int getScale()
            Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
            int width = display.getWidth(); 
            Double val = new Double(width)/new Double(200);
            Log.e("hh", "** "+val);
            val = val * 100d;
            Log.e("hh", "** "+val);
            return val.intValue();
        

【参考方案2】：

WebView x;

x.setInitialScale(1);

这是可能的最大缩放。但对于某些网站来说，它只是看起来很丑陋。

这是我找到的第二个版本

test1.getSettings().setDefaultZoom(ZoomDensity.FAR);

这是一个不错的多面手，似乎只是缩小了很多，但仍然不是我想要的。

现在这是我的最终解决方案。

x.getSettings().setLoadWithOverviewMode(true);
x.getSettings().setUseWideViewPort(true);

基本上这些的作用在另一个这样的问题中得到了回答。

setLoadWithOverviewMode(true) 

加载完全缩小的 WebView

setUseWideViewPort(true)

【参考方案3】：

您可以尝试使用htmlCleaner（如何使用它的示例here）从网页中获取 html，然后提取您要显示的部分并将其加载到 WebView 中使用：WebView.loadData();。

我在我的一个应用程序中使用了这种方法来重新格式化页面，以便在移动设备上更容易使用。

【讨论】：

感谢您的支持。但我不允许从我们这边更改源代码。网络服务也是一种选择，但实际上它已在 3 年前在 iphone 中实现。所以我只能从那里管理场景。我不会更改网页中的单个代码。

【参考方案4】：

在 HTML 页面上，您可以有类似 target-densitydpi=240; 的内容 根据设备类型，只需在 Java 代码中设置此参数，页面将自动适应目标密度。

【参考方案5】：

我相信修复应该只在网页级别完成，理想情况下WebView 不能在这里做任何技巧。 WebView 只是一个浏览器（特定的 chromium 浏览器），它应该按照网页的指示进行渲染。

为了真正解决您的问题，您应该尝试修改网页的 CSS。