一般，自適應移動端加這個語句即可
<meta name="viewport" content="width=device-width">
但是，不知道為什么加了這個語句還是沒用，查了查可能跟下面這幾個元素有關系，所以可以嘗試這樣子加：
<script>
var viewportContent = '';
if (window.devicePixelRatio = 1) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
} else if (window.devicePixelRatio == 2) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0';
} else if (window.devicePixelRatio == .78) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
} else if (window.devicePixelRatio == 1.5) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
}
$('head').append('<meta name="viewport" content="' + viewportContent + '">');
</script>
- css像素
- html中度量的單位 用px來計算，在pc中往往 1 css px ＝ 1 物理像素
- css像素時抽象和相對的了，在不同設備中1px對應不同的設備像素；iphone3分辨率是320*480 即 css 1px ＝ 1個物理像素；iphone4 分辨率640x960但屏幕尺寸沒有改變，意味着同一塊區域像素多了1倍 即 css 1px ＝2個物理像素；
- 物理像素
- 表示每英寸所擁有的像素數目，數值越高，代表屏幕能夠以更高的密度來顯示圖像
- 分辨率
- 顯示器所能顯示的像素多少，顯示器可以顯示的像素越多，畫面就越精細，同樣的屏幕區域能顯示的信息就越多
- devicePixelRatio
- window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2個物理像素
- devicePixelRatio在不同瀏覽器中存在一些兼容性問題，並不是完全可靠的
-
其他一些系統、設備
1. iOS
類似的，無視網膜設備devicePixelRatio值為1，視網膜設備為2. 因為實際的像素個數是雙倍。不過，iphone似乎不願意改變大家都熟知習慣的320像素寬度布局，沒有把設備寬度一下子變成640像素，因此，dips寬度依然是320, 於是devicePixelRatio就是640/320 = 2.iOS上的情況要相對簡單些，除了
1就是2. 在其他平台也基本上很簡單，因為一般分辨率都比較挫，devicePixelRatio都是1.2. Android
據我所知，谷歌的Nexus One是第一個使用dips的，比iphone還早。同時Galaxy Nexus以及Galaxy Note都是類運動視網膜顯示器。近距離探究這三個設備應該會有所收獲。Nexus One分辨率是480*800, 為了最優的頁面瀏覽，Android WebKit團隊決定縱向手持時候的寬度依然是320像素，因此，
devicePixelRatio值為480/320 = 1.5.
在同一手機上，Opera Mobile有相同的結論，dips為320寬，devicePixelRatio也是1.5.順便提一下，BlackBerry Torch 9810(OS7)物理像素同樣480像素，BlackBerry WebKit團隊決定堅持
devicePixelRatio為1. 這可能是更不錯的做法，在Torch顯示器上480px寬度站點或多或少有些難以閱讀。Galaxy Nexus有像素的提升，為720×1200. Android團隊決定提高dips層的寬度到360像素。從而使
devicePixelRatio為720/360 = 2. Chrome團隊決定跟進，就如騰訊QQ瀏覽器所做的那樣。然而，Opera，堅持自我，dips寬度為320px, 於是
devicePixelRatio為720/320 = 2.25. 不過似乎還與zoom縮放層級有關。Galaxy Note物理像素為800×1200. 這里所有瀏覽器都決定使用與Galaxy Nexus一樣的比率：Android WebKit, Chrome, 以及QQ都是
2，也就意味着其dips寬度為400px. 然而，Opera依然一意孤行2.25, 於是其dips寬度值有些怪怪的: 356px.Android標准似乎不嚴格，於是自家人玩自家人的游戲，對於開發者而言，可能又會面臨苦逼~~
3. 視網膜MacBook
新的MacBook采用視網膜顯示屏，其devicePixelRatio是（如果不出意外）2. 視網膜MacBook的物理像素是2800×1800，而顯示出分辨率為1400×900，如果把分辨率作為dips層，則devicePixelRatio為2應該是無誤的。需要指出的是，如果你把分辨率改成1920×1200，
devicePixelRatio依然是2. 嚴格來講，這是不准確的，應該是1.5, 然而你也可以說MacBook的分辨率不同於dips層，這種情況下devicePixelRatio在台式機/筆記本下的定義就不一樣（哪一個？不知道。）。在任何情況下，根據蘋果的規范做法，
devicePixelRatio值只可能是1或者2. 如果你看到2，你要提供視網膜優化顯示圖片，如果是1，使用正常的圖片——（這里內容其實屬於視網膜站點的開發內容）。 -
結論
devicePixelRatio在大多數瀏覽器是值得信賴的。- 在iOS設備，
screen.width乘以devicePixelRatio得到的是物理像素值。 - 在Android以及Windows Phone設備，
screen.width除以devicePixelRatio得到的是設備獨立像素(dips)值。
- layout viewport
- 移動設備的默認viewport,css布局是以layout viewport 來做為參考系計算的
- document.documenElement.clientWidth 獲取
- 該尺寸時動態設置
- visual viewport
- 代表瀏覽器窗口的尺寸，當用戶放大瀏覽器時這個尺寸就會變小
- window.innerWidth 獲取
- ideal viewport
- 屏幕尺寸 設備屏幕的尺寸 單位是物理像素
- screen.width 獲取 屏幕尺寸是不變的
- 在該viewport中用戶不需要縮放和橫向滾動就可以正常查看網站的所有內容
- 設置移動端網站一般以這個viewport為准,ideal viewport 的寬度等於設備屏幕寬度，使得無論在什么分辨率下，那些針對ideal viewport設計的網站都可以完美的呈現給用戶。