0

I'm trying to save out images for a mobile site. I'm saving out a hires (width 640px) and a low res (width 320px) for the iPhone 4. If I view the jpg image in Safari mobile, it shows full width (portrait mode). If I use it as the background image in the CSS, it takes up about 2/3 of the screen (portrait mode).

I'm using this code to detect the retina screen

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {

#header
{
    background:url(images/hires/header.jpg) no-repeat;
    width:640px;
    height:257px;
}

}

The only thing that fixes it is:

<meta name="viewport" content="width=640" />

in my HTML header. But, that would totally nix it for something like an Atrix 2 that has 540px width. I tried the:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

And then the image was about twice the width of the screen (portrait mode).

I can't for the life of me figure out what I'm doing wrong or how to cater to every single phone/resolution/screen size.

ahainen
  • 766
  • 1
  • 5
  • 12

1 Answers1

0

Okay, this seemed to fix it, haven't been able to try it on things other than iPhone 4 and iphonetest.com

(The initial-scale=.5 was the thing that helped) Not sure what it does

ahainen
  • 766
  • 1
  • 5
  • 12
  • *note - this fixed it for portrait view, but once I switch to landscape, landscape is double size. The thing that fixes portrait, breaks landscape. Argh... – ahainen May 31 '12 at 01:59