苹果iPad的窗口尺寸问题

我试图在运行Safari的iPad上搭配一对“当时”和“现在”的JPEG图像。在我的BODY声明中，我捕获了onload和onresize，并调用了查看window.innerWidth和window.innerHeight的JavaScript。问题是，Safari似乎报告iPad的横向取向的准确信息，但不是用于肖像。对于风景，Safari报告内部981x644和外部1024x673。但对于肖像，Safari报告内部980x1185和外部768x929。我的JavaScript检查方向是横向还是纵向，然后分别调整一对JPEG或并排或顶部和底部的大小。但是，当Safari在描述尺寸时，这并不适用。任何人都可以解释这里发生了什么？谢谢。苹果iPad的窗口尺寸问题

来源

2012-03-06 Frank Natoli

附加说明：无论iPad的方向如何，Safari报告screen.width = 768和screen.height = 1024。 – 2012-03-06 20:49:31

虽然这不能解决您的具体问题，但是您有使用JavaScript处理布局的具体原因吗？看来你会更好地使用CSS媒体查询来处理这个任务？ – Jack 2012-03-06 23:41:37

如果我能够完成我想要的任务，并排放置景观，纵向上下，在飞行中调整大小（这两个图像可以有不同的尺寸），我很乐意学习。你能介绍我一些CSS媒体查询的例子吗？ HTML TABLE是不合格的，因为这是固定格式，可以是一行两列，也可以是一列两行，但不能为iPad定向旋转动态调整。谢谢。 – 2012-03-07 03:19:40

我无法解释为什么它如此（它的驾驶我疯狂，以及）

但我可以提供一个解决问题的方法：用CSS，而不是JS做到这一点！

可以使用媒体查询来建立portrain和景观不同的布局做到这一点：

@media all and (orientation: portrait) { 
    ... 
} 
@media all and (orientation: landscape) { 
    ... 
}

，并使用CSS3来自动调整大小的图像，同时保持其长宽比：

background-position: center; 
background-repeat: no-repeat; 
background-size: contain;

这里是一个JSFiddle，其中包含所有必需的代码：http://jsfiddle.net/BULxm/

Hele是直接链接到结果，用于在iPad上进行测试：http://fiddle.jshell.net/BULxm/show/

来源

2013-07-24 16:44:48 Tobia

苹果iPad的窗口尺寸问题

回答

相关问题