我有一个非常适合智能手机等小型设备的移动网站,但它在平板电脑上看起来不太好。
我正在使用 webview 来显示网站。这个 webview 占据了所有的屏幕区域。有什么方法可以使 webview 模拟小型设备?
我没有完全从文档中得到什么选项组合(getLoadWithOverviewMode
、setUseWideViewPort
、setDefaultZoom
)会让我实现我想要的想。任何帮助将不胜感激。
观察:我已经尝试设置文本缩放 (setTextZoom(int)
)。它变得更好一些,但不如在智能手机上好。
Obs2:我无法更改网站。 :(
更新:
如果我将 webview 宽度更改为 720 像素,html 页面将更改为移动布局并可以很好地显示。现在我想这样做,但要保持 webview 的全宽。就像欺骗 html 页面认为 webview 宽度比实际宽度小。
Obs:Zoom 不工作。 html 页面没有启用它。而且我认为这不是一个好方法,因为缩放不会改变感知的 webview 大小。
最佳答案
更新:如果您有较新的 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)
一起用更少的代码完成了我之前取得的所有成就。
关于android - 让平板电脑中的webview模拟一个小设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31246566/