html js 屏幕宽度,javascript – 更改视口宽度后如何适应屏幕？

我需要一个页面的视口宽度为950px的横向和630像素的纵向。不幸的是这些像素宽度是不灵活的。

我使用CSS媒体查询根据方向调整DOM内容的宽度。

我正在收听JS中的方向改变事件，以便调整方向改变的视口大小。

一切在初始页面加载(纵向或横向)都看起来不错。

但是，在方向更改后，Mobile Safari会保留以前的缩放设置，而不是将视口装入屏幕。双击或两个直线。但我需要这样才能自动。

我已经附上源码，并将其上传到演示URL。

以下是方向更改后的截图：从横向到纵向，从纵向到横向。

如何强制Safari自动将视口宽度设置为屏幕宽度？还是我这样做都错了？

更改视口中的各种比例设置没有帮助。设置最大刻度= 1.0或初始刻度= 1.0似乎会覆盖我的宽度，将宽度设置为设备宽度(即iPad 2上的1024或768)，留下死边距。设置minimum-scale = 1.0似乎什么都不做。

iPad orientation

/**

* update viewport width on orientation change

*/

function adapt_to_orientation() {

// determine new screen_width

var screen_width;

if (window.orientation == 0 || window.orientation == 180) {

// portrait

screen_width = 630;

} else if (window.orientation == 90 || window.orientation == -90) {

// landscape

screen_width = 950;

}

// resize meta viewport

$('meta[name=viewport]').attr('content', 'width='+screen_width);

}

$(document).ready(function() {

// bind to handler

$('body').bind('orientationchange', adapt_to_orientation);

// call now

adapt_to_orientation();

});

body {

margin: 0;

}

#block {

background-color: #333;

color: #fff;

font-size: 128px;

/* landscape */

width: 950px;

}

#block .right {

float: right

}

@media only screen and (orientation:portrait) {

#block {

width: 630px;

}

}

→

←