網站不填充在iPad上的屏幕

Question

我正在開發一個600像素寬的網站，並使用響應式查詢使其適合不同的設備。我正在使用以下代碼：

<meta name="viewport" content="width=device-width" /> 

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    /* iPhone */ 
    .container { width: 100%; max-width: 480px; } 
    ... 
} 

@media only screen and (min-width: 768px) and (max-width: 1024px) { 
    /* iPad */ 
    ... 
} 

雖然我有一個iPad問題。此設備視口寬度爲768像素，因此網站呈現正確，但由於其寬度較窄而向左移動。

我的問題是，有沒有辦法讓網站居中，或者讓它填滿整個iPad屏幕？

在此先感謝

Answer 1

試試這個：

<meta name="viewport" content="600" /> 

更多，在這裏：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

或者到中心集裝箱（假設它是600像素寬）

.container { 
    width:600px; 
    margin:0 auto; 
} 

雖然首先可能會使網站變大。

Answer 2

爲什麼網站600px寬？您應該使網站默認填充視口的100％，然後調整內容周圍的邊距，font-size，每個屏幕大小的圖像大小等以適應內容。

你可以拿this site爲例。如果您嘗試讓瀏覽器窗口變得越來越小，則會看到所有內容都會調整（甚至當視口很小時會出現移動菜單）。所有這些都是使用針對不同屏幕尺寸的媒體查詢完成的。

（對不起，我的語法）