固定寬度的移動網頁支持

Question

我來到了一個問題上移動頁面項目的後期階段的多個設備。客戶要求支持iPhone和各種Android移動設備，而不是僅支持iPhone。

的移動頁面寫於XHTML，與HTML頁面寬度640像素，並且其元件具有寬度，e.g。 500px，％20 ...所以這個頁面在iPhone的Safari瀏覽器中看起來很棒，它具有以下視口，但在其他設備的瀏覽器中很難看。

<meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=device-dpi,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5;"> 

我試圖用視玩來解決問題，但是必須是掙扎了很長一段時間。我的想法是關於初始規模，有人可以建議一種方法來動態分配這個值=設備寬度/ 640？

感謝

Answer 1

你應該只使用：

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

爲什麼320？這是因爲雖然iPhone 4的屏幕寬度爲640像素，但它是一個「視網膜」顯示屏，其有效dpi的分辨率是桌面屏幕的兩倍。因此，它具有2的window.devicePixelRatio，這意味着它的設備寬度是僅二分之六百四十零= 320 CSS像素，即，每個CSS像素佔用的物理器件中的像素（參見this article on QuirksMode有詳細介紹）的2×2的正方形。

這2個比例是非常有用的，因爲比如你可以設置字體大小：14px的，而該文本的感知大小將是，如果你在iPhone 3G（看14px的文字相同的，因爲它實際上將顯示在iPhone 4上使用28個物理設備像素，從而補償較高的dpi）。如果使用僅14個物理設備像素來顯示字體大小：14px的文字，則iPhone 4的尺寸看起來會很小（它是iPhone 3G的一半大小）。現在

，有這樣的結果：你的網站必須設計爲320像素寬度，而不是640像素。但事實已經如此，因爲iOS從來不支持target-densityDpi = device-dpi，所以通過放寬width = device-width，你無論如何都應該放寬width = 320。

那麼，爲什麼使用寬度= 320，而不是寬度=設備寬度？既然你說你的網站是一個固定寬度的佈局，那麼寬度=設備寬度，如果它顯示在不同尺寸的設備上，它可能看起來很糟糕，例如，你可能會看到右邊更寬的白色邊緣設備，而寬度= 320瀏覽器將按比例縮放以適應設備的屏幕寬度（因此它可能看起來有些放大，但這可能比具有白色邊距更好）。

但是，請你只認爲這是一個權宜之計：這將是更好的保持寬度=設備寬度，並修改您的網站設計是靈活的，而不是固定寬度（例如設置寬度：100％在你的div和圖像，而不是寬度：320px）。有關更多信息，請參見http://www.html5rocks.com/en/mobile/responsivedesign/

最後，如果您不希望用戶能夠放大和縮小，則可以保留「，user-scalable = no」術語，但出於可訪問性原因，通常會更好忽略這一點，除非您正在設計類似手機maps.google.com的手機，您可以手動處理縮放縮放手勢，而且您不希望瀏覽器發生干擾。