在iPhone和iPad上顯示網站的整個寬度

我很感謝來自熟練使用CSS的人的一些建議。由於我無法確定的原因，只有我的網站的右側出現在iPhone/iPad瀏覽器中，並且左側的三分之一甚至無法看到。在iPhone和iPad上顯示網站的整個寬度

如果有人可以解釋是什麼原因引起的問題以及如何解決問題，我會很感激。

下面是設置佈局CSS的一部分：

body { 
position:absolute; 
width: 960px; 
top: 0px; 
left: 50%; 
margin-left: -480px; 
}

來源

2013-04-18 Dimitri Vorontzov

首先，嘗試刪除絕對定位，寬度，邊緣，從身體左側標籤。如果您想將網站居中，請將所有內容以div寬度寬度包裝：960px;保證金：0汽車; – Turnip

第一：嘗試從body刪除此（position: absolute; width: 960px; top: 0px; left: 50%; margin-left: -480px;）。

二：這裏是如何中心的網頁width: 960px; margin: auto，把那#page

因此，與上body的一些CSS移除，下方#page的CSS可能更好地工作

#page { 
    width: 960px; 
    margin: auto; 
    overflow: hidden; /* to compensate for some element overflowing and messing up your layout */ 
}

來源

2013-04-18 12:23:16 Johan

完美，@Johan。這解決了一切。我很高興見到一位清楚知道他在CSS/Wordpress方面的人。 –

你需要修改每個設備上你身體的寬度。可以使用@media查詢通過CSS做

/* Ipad Landscape */ 
@media screen and (max-width: 1100px) { 
    body { 
    width: 80%; 
    left: 0%; 
    margin-left: 10%; 
    } 

} 

/* iphone 5 landscape ipad portrait */ 
@media screen and (max-width: 800px) 
{ 
} 

/* iphone 4 lanscape */ 
@media screen and (max-width: 500px) 
{ 
} 

/* iphone 4- 5 portrait */ 
@media screen and (max-width: 400px) 
{ 
}

來源

2013-04-18 12:26:07 Romain

謝謝@Romain。儘管這並不是我所問的內容，但是您的建議將有助於我在此項目的未來工作階段，並且非常感謝您對此的詳細說明。 –

在iPhone和iPad上顯示網站的整個寬度

回答

相關問題