Question

我试图在运行Safari的iPad上兼顾一对“当时”和“现在”的JPEG图像。在我的BODY声明中，我捕获onload和onresize并调用JavaScript，它们查看window.innerWidth和window.innerHeight。问题是，Safari似乎报告了iPad的横向方向的准确信息，但不是肖像。对于横向，Safari报告内部981x644和外部1024x673。但对于肖像，Safari报告内部980x1185和外部768x929。我的JavaScript会查看方向是横向还是纵向，然后分别为并排或上下调整JPEG对的大小。但是当Safari对这些维度撒谎时，这种方法并不奏效。任何人都可以解释这里发生了什么？感谢。

Answer 1

我无法解释为什么会这样做（这也让我感到疯狂）

但是我可以为你的问题提供一个解决方案：用CSS而不是JS来做它！

您可以使用媒体查询为portrain和landscape构建不同的布局：

@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/

苹果iPad的窗户尺寸有问题

1 个答案: