Question

I’m wrapping my brain around mobile sites using jquerymobile’s framework. So far I have a basic little page which looks right in portrait mode – then I flip to landscape and everything scales in size.

I’m trying to control the look of it all using css’s @media implementation setting this meta tag in the head:

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

For example take the following img wrapped inside a div:

<div id="main-banner"><img src="mybanner.png" /></div>

And I have the following CSS so that the image should resize to whatever the parent DIV width is:

img {
max-width: 100%;
height: auto;
}

With the declarations depending on the screen size for the older iphones:

<!-- iPhone 2G, 3G, 3GS Portrait -->
@media only screen and (device-width: 320px) 
and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
    #main-banner {
        width: 300px;
    }
}

<!-- iPhone 2G, 3G, 3GS Landscape -->
@media only screen and (device-width: 480px) 
and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
     #main-banner {
        width: 460px;
    }
}

Note: changing the width from 460 to something much smaller has absolutely no effect – it is safe to say that the landscape CSS is not being initiated at all.

I have copied this code from a site as something to work from and it seems to work for others – however like I said in mine everything scales up – even the image… (I’m aware that there is some scaling that happens for text and that is supposedly normal, but I’m guessing the image is ending up about 20% bigger than 460px in width in landscape mode.

What am I missing / don’t understand here?

Answer 1

Updated header file to include maximum-scale!