Problem with iPhone 4 with viewport

Question

I asked a question and got an answer about the size of images for mobile browsers.

The answer is provided for embedded images. However, I also need to use background images as part of the header. They are installed through css classes. On android, they scale correctly in both portrait and landscape orientations, but on iPhone they automatically zoom in when they are rotated from portrait to landscape. This is problem. I have a viewport tag as shown below:

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

Apparently, when the iPhone (at least the newest versions) turn into landscape mode, it scales and scales in a really huge way, and doesn’t just repeat the background more times to accommodate a wider screen.

This is what my code looks like:

<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>

where the logoHeader class is as follows:

td.logoHeader {
  background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat, 
            url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
  text-align:center;
}

Any ideas? I know that I can add a scalable metadata user property to the viewport, but we don’t want users to manually zoom in if necessary. We just want to prevent auto-scaling when the phone is in landscape mode.

FYI: I searched and found this and this , which pretty much ask the same question, But they are both a few months old and they don’t have an actual answer to the problem, so I hope someone comes up with something intermediate.

Answer 1

to avoid scaling when changing orientation, try

<meta name='viewport' content='width=1024' />

. android, viewport PHP- PHP + javascript.

Answer 2

:

<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>