iPad Safari中的可用区域有多大

Question

我正在为iPad开发一个Web应用程序,以便在Safari中运行.我还没有iPad可以测试.有没有人知道可用的屏幕大小 - 在Safari/ipad控件的任何空间占用之后？

Answer 1

你应该遵循TN2262并编写维度不变的代码.

如果您需要逻辑像素大小,document.body.client[Width|Height]则始终为980×1208.

在您可以使用的绝对像素方面,Mobile Safari的导航栏占用大约78px,因此在纵向方向上它是768×946,在横向方向上它是1024×690.

可以有键盘(纵向高度为308px,横向为397px).

更新:以上绝对数字仅适用于iOS 4.x或更早版本.在iOS 5.x Apple中引入了标签栏,它将导航栏+状态栏的高度增加到96px.实际上,即使在iOS 5.x之前,书签栏的存在也会影响视口.

@ user333216:没错.请注意,2010年Safari没有标签栏.例如,在http://www.ipatrix.com/wp-content/uploads/17-Safari.png中,导航栏+状态栏*为*78px高.查看更新的答案. (4认同)
没有"维度不变的代码"这样的东西.响应式设计背后的理念是"充分利用每个设备",了解真实设备上最常见的分辨率有助于实现正确.这就是为什么我觉得这个问题很重要 (3认同)
这是错误的,据我所知,测量结果实际上是:风景:1024x672和肖像:768x928.我认为KennyTM没有考虑到屏幕顶部的ipad状态栏. (2认同)
我使用运行iOS 7.1(11D167)的iOS模拟器,发现Safari的Chrome现在高度为97px而不是96px.因此,横向为1024x671,纵向为768x927.[此评论](http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue#comment32062380_20007084)支持我的发现. (2认同)