WebView - 将响应式站点显示为桌面答案

【问题标题】：WebView - Displaying a Responsive Site as DesktopWebView - 将响应式站点显示为桌面
【发布时间】：2018-11-11 02:32:02
【问题描述】：

乍一看，这可能是一个典型的、被广泛使用的问题。但是我看过的所有其他答案（有很多）一致建议（几乎总是）将 WebView 的用户代理更改为桌面字符串。一直以来，人们都回应说这对他们不起作用。包括我自己。

作为一名网页设计新手，从我所做的挖掘看来，在过去几年的某个时间点，“响应式设计”成为推荐和最广泛使用的网页设计实施理念，用于确定如何交付/显示网站。

这就是为什么我认为更改 WebView 的用户代理没有任何效果的原因，因为该网站似乎正在确定如何根据元标记“视口”交付内容，例如：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

还有其他人克服过这个问题吗？我对这个问题的（外行）分析是否正确？

【问题讨论】：

标签： android html mobile webview desktop

【解决方案1】：

据我了解，我认为这似乎是以下情况

请查看这个答案Showing the desktop version of a fully responsive website on tablets

【讨论】：

【解决方案2】：

所以我想我可能已经找到了一个解决方案，部分原因是@hussnain-muavia 的回答，尽管我需要扩展的内容稍微多一些，我认为这需要它自己的回应。

WebView 设置

WebView 需要能够执行 JavaScript：

WebSettings settings = _webView.getSettings();
settings.setJavaScriptEnabled(true);

为了使站点完全缩小（即显示整个站点且没有滚动条），必须将其他设置应用于 WebView：

settings.setUseWideViewPort(true);
settings.setInitialScale(1);
settings.setLoadWithOverviewMode(true);

实现桌面布局

最终会产生桌面视图的是以下 JavaScript：

function desktopMode() {
    var viewPort = document.getElementsByName("viewport");
    if (viewPort != null) {
        viewPort = viewPort[0];
    }
    else if ((viewPort = document.getElementById("viewport")) == null) {
        return;
    }
    viewPort.setAttribute("content", "width=" + (screen.width + 1) + "; initial-scale=0.5");
}

正如我在问题中提到的，我是一名网页设计新手。虽然我注意到的一件事是不一致（对不起网络开发人员？）所以我故意按名称和 ID构建了一个检查。我们应该只期望一个标签，因此为什么 name 假定第零个元素。

在这个解决方案的基础上，我发现我得到了一个桌面布局，但并不完整。所以我修改了计算：

    getViewport.setAttribute("content", "width=" + (screen.width * 4) + "; initial-scale=0.5");

我不喜欢它。但它有效。我怀疑可能有更好的计算或常数。

可能值得一提的是，更改用户代理字符串仍然值得一提，以防网站不使用响应式设计。但这是一个无关的话题。

这个解决方案的一个主要缺点是它会导致一些丑陋的 UI，用户可以在其中看到正在调整大小的网站。当我将 JS 放入 onPageStarted 时，当然功能会被覆盖。所以我把它放在超级 onPageStarted 调用之后或 onPageFinished 中，这导致用户看到调整大小发生的结果相同。有什么想法吗？

【讨论】：