键盘处于活动状态时,iPad Web应用程序视口高度会在方向更改时更改

时间:2014-03-06 04:31:11

标签: javascript html ios ipad web-applications

我有一个运行iOS7的iPad网络应用。视口元标记为:

<meta name="viewport" content="initial-scale=1.0, user-scalabe=no">

在加载和方向更改时,我正在定义高度,以便在键盘处于活动状态时,它不会缩放视口高度。解决的诀窍here

$('body, #canvas').css('height',window.innerHeight);

问题是当键盘处于活动状态并且方向发生变化时,视口会更改为VISIBLE视口区域的值(而不是键盘未处于活动状态时的视口高度)

1 个答案:

答案 0 :(得分:0)

我可以通过首先获取设备的可用宽度和高度值来将高度定义为像素值,然后简单地计算方向并相应地设置我的元素。

var deviceHeight = screen.availHeight;
var deviceWidth = screen.availWidth;

if(window.orientation > 0) {
    // landscape 
    $('body, #canvas').css('height',deviceWidth);
} else {
    // portrait
    $('body, #canvas').css('height',deviceHeight);
}

不是最优雅的解决方案,但到目前为止,非常好。