當iPad處於縱向模式時，縮小移動Safari瀏覽端口寬度？ -

我正在研究一個網站，該網站在iPad上以橫向模式瀏覽時最適合使用。一切都在一個1024像素寬的<div>容器中。不過，我仍然需要縮小視口，因此當用戶將iPad變爲縱向時，用戶不必縮小或水平滾動即可查看頁面上的所有內容。當iPad處於縱向模式時，縮小移動Safari瀏覽端口寬度？ -

目前我有這個<meta>標籤在我<head>：當頁面在橫向模式被認爲

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

一切顯示正常，但我不能得到上述所需的肖像的行爲工作。我嘗試將initial-scale更改爲0.75，而恰恰相反：所有內容都適合縱向模式，但iPad處於橫向模式時會有額外的水平空間。

是否有任何CSS，Javascript或特殊的視口設置我可以用它來得到這個工作？

P.S.我不能使用user-scalable=no。

來源

2011-06-29 Phil

您甚至可以在用於桌面瀏覽器的同一CSS中添加方向屬性......只需添加以下內容;

@media only screen and (device-width:768px)and (orientation:portrait) 
/*iPad Portrait orientation styles */ 

@media only screen and (device-width:768px)and (orientation:landscape) 
/*iPad landscape orientation styles */

再次記住的iPad，設備寬度總是768px，不論方向......我知道這是令人困惑，但是這事情是這樣的......

您還可以檢查出很同樣的好教程在 http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

來源

2011-06-29 13:18:01 testndtv

感謝您的回答。如果我首先使用基於百分比或em的設計，這應該很容易... – Phil

是的，正確的......它會在兩個方向上正確顯示..Thx .. – testndtv

您可以使用定位特定的CSS是這樣的：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

在您可能需要設置視口設置到設備最大寬度，走內容的實際寬度的照顧這種情況下，使用CSS。例如，將所有東西都包含在一個div中，每個方向都有適當的寬度，1024px或768px（減去狀態欄和瀏覽器鑲邊是必需的）。

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

來源

2011-06-29 12:56:50

謝謝，hmthr的和你的答案非常相似，我希望我可以將兩者都標記爲答案，但是hmthr的答案是我最終使用的答案。 – Phil

當iPad處於縱向模式時，縮小移動Safari瀏覽端口寬度？ -

回答

相關問題