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?


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.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.

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

— asked November 6th 2010 by Petter Granstrom
  • iphone
  • mobile

2 Answers

  • 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.


    — answered November 6th 2010 by Petter Granstrom
  • 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;
    — answered January 14th 2011 by Roger Chapman
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.