Titanium Community Questions & Answer Archive

Question

Webview and scaling issue on iPhone 4?

Hi,

Im trying to make a window/view that displays an image and automatically stretches the width to the device-width while preserving the aspectratio of the picture.
Also, I want users to be able to zoom.

The following code works great on iPhone 3GS and in Simulator (both Iphone and Iphone 4).

webview = Ti.UI.createWebView({backgroundColor:'#000'});
imgurl = "http://some-random-img";
webview.scalesPageToFit=true; 
webview.html = '<img style="width:100%;" src=' + imgurl + '>';

But, If run on a real iPHone 4 device, the webview seems to be correct size, but the image inside gets reaaaaally tiny (but still allowing zoom)..

A too small image on the 3GS gets scaled up. The pictures im showing is mostly 640*480, but some are larger so it needs to be dynamic.

Edit;
If scalesPageToFit is FALSE, the image scales correctly on iPhone4 and 3gs, but no zoom.

Answer 1

Of course, if someone has a better way to do this (stretch/scale image, keep AR, and allow zoom) I'm more then happy to learn how.

Thanks.

Answer 2

You should try using css media queries:

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

    #myContainer {
        background: #B9A17E url(../images/bg@2x.png) left top fixed;
        }
}

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Webview and scaling issue on iPhone 4?

2 Answers