1

I'm developing a mobile version of a website to work in IE on Windows Phone (7.8), it works fine in Portrait, but as soon as I tilt the phone to landscape (or load it that way), the site appear zoomed in. A double tap will reset it to it's correct zoomed-out view.

This is the CSS I'm using:

/* Styles for landscape view here */
@media (max-width: 980px) {
@-ms-viewport { width: 980px; zoom: 1; }
@-webkit-viewport { width: 980px; zoom: 1; }
@-moz-viewport { width: 980px; zoom: 1; }
@-o-viewport { width: 980px; zoom: 1; }
@viewport { width: 980px; zoom: 1; }
body {
    width: 980px;
}
/*Further styles here*/

}

/* Styles for portrait view */
@media (max-width: 980px) and (max-aspect-ratio: 1/1) {
@-ms-viewport { width: 664px; zoom: 1; }
@-webkit-viewport { width: 664px; zoom: 1; }
@-moz-viewport { width: 664px; zoom: 1; }
@-o-viewport { width: 664px; zoom: 1; }
@viewport { width: 664px; zoom: 1; }
html, body {
    width: 664px;
}
/*Further styles here*/
}

I'm testing on a Nokia Lumia 720 (480 × 800). I don't have the same issue when I use the WP emulator at any resolution.

Appreciate any idea

MarkLunney
  • 425
  • 1
  • 4
  • 10
  • What emulators do you have access to - WP7 and WP8? the Lumia 720 is WP8 device and runs IE 10, WP7.8 runs IE9 which is why there's a difference in behaviour. – Neil Turner Nov 16 '13 at 21:07

0 Answers0