響應式設計 - Android無法縮放

我正在處理的響應式設計出現了另一個問題。爲了簡單起見，如果屏幕尺寸或設備尺寸小於750像素，我會將主體設爲捕捉到480px。那麼，理想情況下，任何設備上的屏幕都應該縮放以適應寬度。響應式設計 - Android無法縮放

今天已經有一些幫助，我添加了視口元，所以現在CSS是響應我的iPhone和Android，以及最小化時的桌面瀏覽器。

iPhone看起來不錯;它放大到寬度，所以即使網頁大約是480px，它完全適合我的320px iPhone屏幕。

但是，在Android上，它放大得太遠了。大約25％-30％的右側不在屏幕上，我必須滾動才能看到它。如果我縮小一點，那麼窗口就會適合屏幕寬度，並且看起來很好。我不知道爲什麼我必須手動縮小。

爲什麼Android在頁面加載時沒有縮小到頁面寬度？

我的meta標籤是這樣的：

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

我的CSS是這樣的：

@media all and (max-device-width: 750px), all and (max-width: 750px) { 
    body {max-width:480px;} 
    #container { 
    width: 90%; 
    margin: 0px auto; 
    padding: 0px; 
    min-width:480px; 
    } 
    #rightnav {display:none;} 
}

來源

2012-12-21 Kevin

您應該採取移動第一種方法。將網站樣式設置爲320px寬，然後將設計更改爲750px。這將確保您的網站在小於750像素的任何屏幕上都能正常工作。 – donutdan4114

我們正在轉換和現有的遺留網站。不幸的是，從移動頁面開始只是不切實際。此外，該網站的寬度超過320像素（有160個和300個像素廣告區域相鄰）。 – Kevin

如果你打算到一個320像素的屏幕，你明明已經上顯示一個480x70佈局以便縮放，所以這個效果與指定的完全一樣，但是iPhone「巧妙地」忽略了一些規則來全屏顯示它。您可以將initial-scale的值設置爲0.75，以強制每個設備在開始時保持該縮放級別。當然，更好的解決方案是在320px設備上再有一個媒體查詢來縮小屏幕內容。

來源

2012-12-21 03:17:36 devsnd

該頁面的主體有2個橫幅廣告必須保留。一個是160寬，一個是300寬。在一起，這些是我必須有460像素的寬度....添加在一個小填充等等，這就是我正在處理的480像素。所以，我需要480px在iphone上擴展到320，並且需要在各種各樣的Android設備上使用它。 – Kevin

響應式設計 - Android無法縮放

回答

相關問題