android - 让平板电脑中的webview模拟一个小设备

Question

我有一个非常适合智能手机等小型设备的移动网站，但它在平板电脑上看起来不太好。

我正在使用 webview 来显示网站。这个 webview 占据了所有的屏幕区域。有什么方法可以使 webview 模拟小型设备？

我没有完全从文档中得到什么选项组合(getLoadWithOverviewMode、setUseWideViewPort、setDefaultZoom)会让我实现我想要的想。任何帮助将不胜感激。

观察:我已经尝试设置文本缩放 (setTextZoom(int))。它变得更好一些，但不如在智能手机上好。

Obs2:我无法更改网站。 :(

更新:

如果我将 webview 宽度更改为 720 像素，html 页面将更改为移动布局并可以很好地显示。现在我想这样做，但要保持 webview 的全宽。就像欺骗 html 页面认为 webview 宽度比实际宽度小。

Obs:Zoom 不工作。 html 页面没有启用它。而且我认为这不是一个好方法，因为缩放不会改变感知的 webview 大小。

Answer 1

更新:如果您有较新的 API(> 18)，您可能需要查看此问题末尾的注释。

---

经过一番努力，我找到了解决方案!

解决方案不是缩放。未为 html 页面启用缩放，它不会影响 html 感知的大小。

我通过降低 webview 的 width 得到它:

ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();

webviewLayoutParameters.width = (int) (760);
webviewLayoutParameters.height =(int) (webviewHeight);
mWebView.setLayoutParams(webviewLayoutParameters);

然后，由于页面的样式会针对小于 768 像素的屏幕尺寸发生变化，它开始看起来不一样了。好多了。

但后来我想放大那个小的 webview 以便它适合整个屏幕。为此，我使用了 scaleX 和 scaleY。

这是我完整的评论解决方案:

// First, get the current screen size
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int displayWidth = size.x;
int displayHeight = size.y;

//Then, set the amount you want to make your screen smaller. This means that it will comunicate to the HTML that its 20% smaller than it really is
float amplification_ratio = (float) 0.20;

// Shrink webview size
ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();
webviewLayoutParameters.width = (int) (displayWidth*(1-amplification_ratio));
webviewLayoutParameters.height =(int) (displayHeight*(1-amplification_ratio));
mWebView.setLayoutParams(webviewLayoutParameters);

// Now scale it the inverse ammount so it will take the full screen.
mWebView.setScaleX(1/(1 - amplification_ratio));
mWebView.setScaleY(1/(1 - amplification_ratio));

效果很好。我设法以改变屏幕尺寸的方式对其进行缩放。缩小和缩放会使图像质量降低一些，但不是什么大问题。

Obs:HTML 页面是在 bootstrap 中创建的，并且只有用于 bootstrap 的 -xs 设备的类。所以我不得不模拟屏幕小于 768px。

---

Obs2(更新):命名此程序

我在我的应用程序上实现了它，对其进行了测试(模型和集成)，现在它已投入生产。要创建函数和变量，我必须为这个过程命名。这就像增加 webview 像素的大小一样。这样，webview 仍然会占据整个屏幕，但它的宽度(以像素为单位)会更小。

考虑到这一点，pixelEnlargementFactor、pixelMagnificationRatio 或 pixelSizeMultiplicator 之类的任何名称都将是一个不错的名称。

---

更新:

警告:仅在特定情况下使用上述方法!

我有一个旧的 API 版本 (15) 和一个有很多选项的 RelativeLayout。那时，setInitialScale(120) 没有按我的意愿工作。

现在，我已将我的 API 更改为 19，并将我的布局更改为具有更少选项的更简单的 FrameLayout。现在，setInitialScale(120) 命令与 mWebView.getSettings().setUseWideViewPort(false) 一起用更少的代码完成了我之前取得的所有成就。