僅適用於手機的視口

Question

我試圖製作具有電話視圖和普通視圖的響應式佈局（即平板電腦應正常加載頁面）。

一切工作正常，只要CSS去，然而視口是在平板電腦上，當他們在肖像模式下搞砸了平板電腦的縮放。 （他們放大到他們的像素寬度）

有沒有辦法讓平板電腦縮小到整個頁面，同時仍然有手機負荷縮放到他們的大小？

以下是我所擁有的......將初始縮放比例改爲.75幾乎可以工作，但當iPhone在橫向加載正常位置時，我不想這樣做。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 568px)" href="css/mobile-styles.css" /> 

Answer 1

不要弄亂視口，它只會導致頭痛和無障礙問題。取而代之的是，爲手機（小屏幕）創建所需的CSS，然後在min-width:500px（或某個其他斷點）媒體查詢中包含「完整」網站的樣式（大屏幕）。

實施例的CSS：

/*this will fire for any size screen*/ 
nav{ 
    width:100%; 
} 

/*this changes the above styles for any screen over 500px*/ 
@media (min-width:500px){ 
    nav{ 
    width:50%; 
    float:left; 
    } 
}