我正在开发一个移动版网站,可以在Windows Phone(7.8)上使用IE浏览器,它可以在Portrait中正常工作,但只要我将手机倾斜到横向(或以此方式加载),该网站显示放大。双击会将其重置为正确的缩小视图。
这是我正在使用的CSS:
/* 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*/
}
我正在测试诺基亚Lumia 720(480×800)。当我以任何分辨率使用WP模拟器时,我没有相同的问题。
欣赏任何想法