為什麼魅族 mx2 上瀏覽器的 viewport 寬度為 400px?

01-26

魅族 mx2 的解析度為 1280×800 , 為什麼 viewport 寬度只有其解析度一半大小？
環境：魅族 mx2 with Miui V5,
Chrome 和自帶瀏覽器的 viewport寬度都是400px

CSS像素不是物理像素。看一下 window.devicePixelRatio。如果是2就是正常的。

正好前段時間看過，Webkit 下面的 viewport

1. 同 @易旭昕其實默認的 viewport 寬度是 980px；

2. 樓主的 400px 應該是手機網頁中已經設置過 viewport 的寬度，設置 viewport 寬度的方法有以下幾種（優先順序從低到高）：

XHTMLMobileProfile （DOCTYPE 中包含 "-//wapforum//dtd xhtml mobile 1." ）將寬度設置為 device-width
HandheldFriendlyMeta （&）將寬度設置為 device-width
MobileOptimizedMeta (&) webkit 兼容 Mobile IE 的東東，content 需要存在，但是實際的數字沒有意義，將寬度設置為 device-width
ViewportMeta （&）這就是手機上用的比較多的 viewport 的設置方法了，示例也是設置為 device-width
CSSDeviceAdaptation 當前手機端最新版中還沒有支持。

3. 400px 應該就是其中的 device-width，也就是大多數手機網站設置下，viewport 的寬度。device-width 其實是設備的像素寬度/devicePixelRatio。

具體的原因是 MX3 將 devicePixelRatio 設置為 2，原因可以參照為什麼魅族 MX3 要把 density (像素和 DP 的比) 定為 2.5，而不是和其它 1080p 屏幕一樣是 3.0?

4. 對於 Android 的 Mobile web 開發來說，320px 的固定寬度早已經一去不復返了。

Note2 （360px）, Nexus4（384px），MI3（360px）樓主提到的 MX2（400px）等等。

這就要求 mobile 的頁面不應該寫死寬度 320px，不然就會出現非常不協調的空白，淘寶的小哥，抽空優化下？

系統瀏覽器在網頁本身不指定viewport寬度時，默認的排版寬度是980px。這個寬度對桌面版的網頁比較合適。（移動版網頁一般都會自己設置viewport）

這是官方設定的吧，為的是有更好的瀏覽體驗。

這有篇文可以看下：設備像素比devicePixelRatio簡單介紹 ? 張鑫旭