奇怪的行为宽度Safari(iOS)内/外宽度/高度

Question

我一直在为我们的一项服务工作开发移动版本,并且一直在使用jqTouch,并且定位功能让我有些烦恼.

因此,在尝试找到更好的方法来获取方向值(配置文件或横向)时,我发现Mobile Safari正在为innerWidth/innerHeight/outerWidth/outerHeight返回一些奇怪的值.

我已经使用iOS4的iPhone4进行了这些测试

我的测试结果:

No keyboard    |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
---------------------------------------------------------------------------------------------------
Pro --> Lan    |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419
Pro <-- Lan    |                480                   268                  482                   420
Lan -->--> Lan |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419

With keyboard  |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
---------------------------------------------------------------------------------------------------
Pro --> Lan    |                321                   418                  321                   419
Lan <-- Pro    |                481                   269                  481                   419
Pro <-- Lan    |                321                   418                  321                   419
Lan -->--> Lan |                481                   269                  481                   419
Lan <-- Pro    |                481                   269                  481                   419

Pro =个人资料

Lan =风景

因此Pro --> Lan意味着当前方向是Profile将其顺时针移动90度到Landscape

我看到的主要问题是:

• window.outherHeight 键盘显示时始终是相同的值.
• 还有键盘当从景观到横向旋转180度时,返回的值是轮廓方向的预期值

如果你想进行一些进一步的测试,这里有一些东西让你去,你当然需要一个jqTouch配置的网页.

$(document).ready(function(){
    $('body').bind('turn', function(event, info){ var dims = $('#debug').val(); dims = dims + getDimensions(); $('#debug').val(dims); });
});

function getDimensions() {
return "screen.width = " + screen.width
     + "\nscreen.height = " + screen.height
     + "\nscreen.availWidth = " + screen.availWidth
     + "\nscreen.availHeight = " + screen.availHeight
     + "\nwindow.innerWidth = " + window.innerWidth
     + "\nwindow.innerHeight = " + window.innerHeight
     + "\nwindow.outerWidth = " + window.outerWidth
     + "\nwindow.outerHeight = " + window.outerHeight
     + "\n \n ";
}

<textarea id="debug" style="width: 100%; height: 300px;"></textarea>在您的网页上添加某个位置.

我所做的是按照测试结果中的指示进行旋转.复制textarea的内容,并通过电子邮件发送给自己.无论有没有键盘,键盘显示你是否点击textarea;)