Question

这令我感到困惑。请帮忙，我想不出来......

在我的示例html文件中，我将元标记设置为

<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=no">

将网页放入我自定义尺寸的webview中，说800x600。在Android中，我不得不指定“target-densitydpi = device-dpi”，它完成了很好的工作。我使用nexus 7平板电脑测试了我的自定义网页，并且网页正确地适合我的网页视图。

相同的代码在Kindle Fire中不起作用。只显示我网页的一部分，即使我设置'initial-scale = 1.0'也无济于事。

我以编程方式尝试了各种设置，但它也没有帮助。

webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setSupportZoom(true); 
webview.getSettings().setLoadWithOverviewMode(true);
webview.setInitialScale(1);
webview.getSettings().setUseWideViewPort(true);

任何指针？

Answer 1

因为Kindle-Fire是hdpi设备，你需要使用target-density = high-dpi或明确设置533（Fire HD和Nexus7不匹配）

http://developer.android.com/guide/webapps/targeting.html#ViewportDensity

Answer 2

我找到了我报告的问题的解决方案。基本上我最终采用了基于JavaScript的解决方案，我根据视口尺寸动态计算zoomscale。在我的例子中，原始网页内容被创作为1024x768，我需要一个800x600的视口来显示缩放的内容。

加载文档时调用load()函数。

<body style="position: relative; background: url('opt_background.jpg'); background-repeat: no-repeat; background-size: 100% auto;" onload="load()">

function load()
{
// This function gets the current view port width and height, computes an adjusted zoom scale and sets it.
var viewportWidth  = document.documentElement.clientWidth
var viewportHeight = document.documentElement.clientHeight  
var zoomScale = Math.ceil(viewportWidth * 100 / 1024);
document.body.style.zoom= zoomScale + "%";
}

这就是诀窍。

Kindle Fire不能在特定大小的Webview中使用我的网页

2 个答案: