將Android 480w視爲縮放320/640w移動網頁設計

Question

我的設計師遞給我一個640w設計，可在iPhone和Android手機網站上使用。

我得到了一切設置使用320W測量和基於像素比率的媒體查詢替換圖形。這主要是設計中的圖像被用作PX維度中定義的元素和其他元素的背景圖像的問題。我們將所有印刷版的大小設置爲EM，因此一個簡單的媒體查詢可以調整所有版式，但圖標和佈局圖形仍然不正確。

我遇到的問題是，480像素寬的Android測試設備看起來過於放大，我嘗試使用元視口標籤的不同變體來處理這個問題。以下每一項都是獨立嘗試，沒有產生預期的效果。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />

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

<meta name="viewport" content="width=320" />

這主要是在設計圖像的問題被用作背景圖像的元素和在PX尺寸定義的其他元素。我們將所有印刷版的大小設置爲EM，因此一個簡單的媒體查詢可以調整所有版式，但圖標和佈局圖形仍然不正確。

移動網絡對我來說有點未知，我想找到一種方法來處理這個與視口設置，而不是定義其他媒體查詢。我的理解是，視口元存在的目的是幫助處理跨多個視口尺寸的這類問題，而不必在每次稍微不同的視口上市時定義新的媒體查詢。

如果我的方法關閉，請分享一個更好的方法的參考。我們有一些需要流暢和相當固定的元素，這使得這是一個挑戰，但我願意提供建議！

Answer 1

這些替換您的meta標籤，看看是否有幫助：

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

如果這些不幫助，然後它會幫助你看到的代碼來獲取你的CSS和HTML是如何佈局的想法。