0

We have the following viewport meta tag:

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

Here is a breakdown of what happens upon site entry:

iPad + iOS 6.0 + Landscape = correct

ipad + iOS 6.0 + Portrait = same 'zoom level' as landscape, so about 65% of the width is shown, the rest needs to be scrolled.

Android 4.0 Galaxy S3 + Built in browser + Landscape = Zoomed in real close, about 60% of the width is shown, rest needs to be scrolled.

Android 4.0 Galaxy S3 + Built in browser + Portrait = Zoomed in real close, about 60% of the width is shown, rest needs to be scrolled.

Android 4.0 Galaxy S3 + Chrome (play store downloaded) browser + Landscape = Zoomed in even closer, only about 45% of the width is initially shown.

Android 4.0 Galaxy S3 + Chrome (play store downloaded) browser + Portrait = Zoomed in even closer, only about 50% of the width is initially shown.

Android 4.0 Tab 10.1 + Landscape = correct

Android 4.0 Tab 10.1 + Portrait = same zoom level as landscape, so the effect is nearly identical to ipad + portrait.

Is there any cross browser reliable way to have the page show 100% of the width regardless of orientation / ios / android?

Am I correct in assuming that regardless of all of the above, mobile devices tend to 'remember' the zoom level on a per domain level?

Are we using the viewport meta tag incorrectly?

Thanks

anonymous-one
  • 14,454
  • 18
  • 60
  • 84

2 Answers2

0

Short answer is that for any kind of page with Javascript content, you cannot guarantee how it will look. The browsers have different Javascript engines, support different tags, etc.

toadzky
  • 3,806
  • 1
  • 15
  • 26
0

We found that by removing the viewport meta tag completely, all of the above cases began displaying correctly... at 100% width upon initial entry.

anonymous-one
  • 14,454
  • 18
  • 60
  • 84