蘋果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的窗口尺寸問題

回答

相關問題