1

This is baffling to me. Please help, I could not figure it out ...

In my sample html file I have set the meta tag to be 

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

to fit the webpage inside my webview of custom size say 800x600. In Android, I had to specify "target-densitydpi=device-dpi" and it did the job nicely. I tested my custom web page with nexus 7 tablet and the web page fits inside my web view correctly.

The same code does not work in Kindle Fire. Only a part of my web page is shown and even if I set the 'initial-scale=1.0' did not help.

I tried various settings programmatically but it did not help either.

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

Any pointers?

Baz
  • 36,440
  • 11
  • 68
  • 94
Madhavan Rangarao
  • 11
  • 2

2 Answers2

0

Because the Kindle-Fire is an hdpi device you'd need to use either target-density=high-dpi or explicitly set 533 (Fire HD and Nexus7 don't quite match)

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

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52
  • None of the meta tags based suggestions helped. The Kindle Fire that I am dealing did not respond to device specific meta tags that relates to zooming the content to fill the screen. Thanks for your help. – Madhavan Rangarao Oct 01 '12 at 21:29
0

I found a solution to the issue that I reported. Basically I ended up adopting a JavaScript-based solution where I compute the zoomscale on the fly based on the viewport dimensions. In my case, the original web content was authored to be 1024x768 and I needed a 800x600 viewport to show the zoomed content.

Call the load() function when the document loads.

<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 + "%";
}

That did the trick.

Community
  • 1
  • 1
Madhavan Rangarao
  • 11
  • 2