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

Question

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

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

我没太从文档什么的期权组合得到(getLoadWithOverviewMode,setUseWideViewPort,setDefaultZoom)会让我达到我想要的.任何帮助将不胜感激.

Obs:我已经尝试过设置文本缩放(setTextZoom(int)).它有点好,但不如智能手机好.

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

更新:

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

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

Answer 1

更新:如果您有更新的API(> 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)完成了我以前用更少的代码实现的所有功能.