適用於iPad和iOS的自適應設計

適用於移動設備的新設計。我如何確保（尤其是iOS）瀏覽器真正使用我內置的CSS媒體查詢，而不是簡單地重新調整頁面大小？適用於iPad和iOS的自適應設計

對於instace，我試圖設置一個媒體查詢，以便在iPad上的縱向和橫向視圖中可以有不同的佈局，但它看起來像Safari只是重新調整大小或縮放而不是加載媒體查詢。

任何鏈接，教程將不勝感激！

2013-04-14 Illus Ium

[使用視口meta標籤控制移動瀏覽器的佈局 - Mobile | MDN]（https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag） - 可能需要設置'可以跨設備使用。 – slhck

只有一個鏈接就夠了！

http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has

JS通過彈出警報，當各媒體查詢火災來到你的救援。你應該知道一些JS使這些警報發生......

來源

2013-04-14 22:07:24 banjoSas

我們必須針對特定的媒體查詢來處理這種情況。我建議你閱讀this article。

來源

2013-04-15 19:05:12

我使用這些媒體查詢製作的iPad特定CSS

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation:landscape) 
{ 
    /* iPad landscape style here */ 
} 
@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation:portrait) 
{ 
    /* iPad portrait style here */ 
}

以及類似的iPhone使用不同的值。

如果在真實設備上測試很麻煩，您可以在iOS Simulator中檢查設計（如果您的Mac上安裝了iOS開發工具）。您甚至可以在Safari中使用Web Inspector來檢查模擬器中的HTML，CSS和JavaScript。

enter image description here

來源

2013-04-15 20:17:21

適用於iPad和iOS的自適應設計

回答

相關問題