不同設備上的不同頁面

Question

我正在構建響應式網頁。我對不同的寬度有不同的佈局。一個是超過816 px寬的設備。第二個是在640和816之間。最小的是在640像素寬的設備下。

如果我在PC（Firefox，Chrome瀏覽器）上將瀏覽器窗口設置爲任何寬度，它將正確縮放並顯示正確的佈局。如果我在Android平板電腦（Asus Transformer Prime）或iPad上查看它，它也會正確顯示（橫向模式下的最大布局和縱向中等尺寸的佈局）。

如果我在iPhone 5上查看它，它總是顯示最小的一個。在景觀中，它應該顯示中等大小，不是嗎？

在任何Android手機上，它都能正確顯示最小布局的肖像。如果設備轉向橫向顯示，則不會顯示第二大尺寸，並且無法正確顯示導航（與內容重疊）。

我的媒體查詢，是爲大布局以下

@media all and (min-width: 640px) and (max-width: 816px) { ... 
@media all and (max-width: 640px) { ... 

CSS在這兩個前右定義。

它有什麼問題？一半設備正確顯示頁面，另一半則不正確。

Answer 1

iPhone的屏幕是640像素，所以他是用較小的一個，如果你想自己用一個更大的不喜歡我的例子：

@media all and (min-width: 640px) and (max-width: 816px) { ... 
@media all and (max-width: 639px) { ...