Question

我最近构建了一个使用全屏网页视图加载我不拥有的网站的应用。（因此，无法控制网站代码）

我需要webview来显示网站的桌面版本，并且桌面http标头欺骗并不能解决问题。我发现由于网站的响应式设计规则，视口大小决定了网站是发送移动设备还是桌面设备。

在我的Pixel XL上，此代码会使页面看起来正确：

webview_chart.getSettings().setLoadWithOverviewMode(true);

webview_chart.setInitialScale(200);
 webview_chart.getSettings().setUseWideViewPort(false);
 webview_chart.getSettings().setMinimumFontSize(16); String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
 webview_chart.getSettings().setUserAgentString(newUA);
 webview_chart.loadUrl("http://tradingview.com/chart");

这里似乎关键的三件事是

WideViewPort必须为false（或者我是移动视图）
InitialScale = 200使它在我的设备上显示桌面，但事情看起来很小而且很远。因此：
MinimumFontSize = 16。

现在，这会使我的手机上的所有内容都显得很好，而屏幕尺寸相似但屏幕较小的其他设备也存在问题。

在我妻子的原创Moto X上，InitialScale 200仍然提供移动网站。将它改为150并减少字体大小使它在Moto X上看起来很完美，但是在Pixel上，事情太小而且间隔很远，就好像所有的边距都要大。

如何在不同的屏幕尺寸下正确显示此webview？我甚至不确定我使用的代码是否能够取得这样的成就。我只是将它一起攻击并发现它能够显示正确大小的桌面视图（Tons of late night trial-and-error）。但事实证明它不适用于其他屏幕尺寸。在处理网站的响应式设计规则时，我可以做些什么来改变这种灵活性，适应性或响应性？

Answer 1

您需要设置视口，因为目标网站似乎使用基于视口尺寸的响应式设计，而不是基于HTTP请求标头。这种方法是一种常见的CSS实践。

您可以在此处找到详尽的文档： https://developer.android.com/guide/webapps/targeting.html#Viewport

如何正确实施Android Viewport欺骗？

1 个答案: