在平板电脑中制作webview可模拟小型设备

Question

我有一个非常适合智能手机等小型设备的移动网站，但在平板电脑上效果不佳。

我正在使用 webview 来显示网站。此webview占据了所有屏幕区域。有什么办法可以让 webview模拟一个小设备吗？

我从文档中得不到什么选项组合（getLoadWithOverviewMode，setUseWideViewPort，setDefaultZoom）会让我实现我想要的目标。任何帮助将不胜感激。

Obs：我已经尝试设置文本缩放（setTextZoom(int)）。它有点好，但不如智能手机那么好。

Obs2：我无法更改网站。 ：（

更新

如果我将webview宽度更改为720像素，则html页面将更改为移动版面并显示效果。现在我想这样做，但保持webview的全宽。就像欺骗html页面一样，认为webview宽度比实际要小。

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

Answer 1

更新：如果您有更新的API（＆gt; 18），您可能需要查看此问题末尾的注释。

经过一段时间的努力，我找到了解决方案！

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

我通过降低webview的宽度得到它：

ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();

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

然后，由于页面的样式因屏幕尺寸低于768px而发生变化，因此它开始看起来不同。好多了。

但是我想扩大那个小的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)完成了我之前完成的所有代码。