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

Question

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

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

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

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

Obs2：我不能更改网站。 :(

更新：

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

Obs：缩放无效。 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) 一起用更少的代码完成了我之前取得的所有成就。

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

Make webview in a tablet simulate a small device

android

viewport

android-webview