設(shè)置 viewport 實現(xiàn)定寬網(wǎng)頁 WebApp 下布局自適應(yīng)

如水904 2016-09-08

展開全文

設(shè)置 viewport 實現(xiàn)定寬網(wǎng)頁 WebApp 下布局自適應(yīng)

分類：前端技術(shù) | 標(biāo)簽：viewport、定寬、自適應(yīng) | 發(fā)布時間：2014-08-01 23:13:00

一般來說，我們實現(xiàn)布局自適應(yīng)可以有以下幾種方式：

使用流動布局（fluid grid）
根據(jù)屏幕大小選擇加載不同的CSS
使用 CSS 的@media規(guī)則

詳細(xì)的介紹，可以參考自適應(yīng)網(wǎng)頁設(shè)計（Responsive Web Design）這篇文章。

這里介紹的是如何讓定寬網(wǎng)頁在 WebApp 下（或者手機(jī)瀏覽器）實現(xiàn)自適應(yīng)。例如，我們設(shè)計了一套寬度為 640px 的小頁面，主要是用于手機(jī)查看，但是手機(jī)屏幕分辨率實在太多了，要適應(yīng)每臺手機(jī)，應(yīng)該怎么辦呢？

首先，我們在 head 中加入：

<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>

這里表示 viewport 的寬度為匹配設(shè)備屏幕的寬度，且禁用縮放。涉及到兩個概念：

viewport 元素
devicePixelRatio：設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。

由于 iphone 手機(jī)和 android 4.0 以上的手機(jī)支持修改 viewport 的 width 來改變頁面的縮放情況，因此我們可以將 width 指定為頁面設(shè)計的寬度，如此一來，你的頁面正好充滿 viewport 并全屏顯示，而不會縮放。例如：

<meta name="viewport" content="width=640px, user-scalable=no">

但是對于 android 4.0 以下的手機(jī)，不支持設(shè)置 viewport 的 width，但是我們可以設(shè)置 Android 的另一參數(shù)target-densitydpi，從而達(dá)到相同的目的，計算 target-densitydpi 的公式如下：

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
  //UI-width ：WebApp布局寬度
  //device-width ：屏幕分辨率寬度

于是，最終解決方案如下：

<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">

$(function () {
    var DEFAULT_WIDTH = 640, // 頁面的默認(rèn)寬度
        ua = navigator.userAgent.toLowerCase(), // 根據(jù) user agent 的信息獲取瀏覽器信息
        deviceWidth = window.screen.width, // 設(shè)備的寬度
        devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和設(shè)備獨(dú)立像素的比例，默認(rèn)為1
        targetDensitydpi;

    // Android4.0以下手機(jī)不支持viewport的width，需要設(shè)置target-densitydpi
    if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {
        targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
        $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +
                ', width=device-width, user-scalable=no');
    }

    // TODO: 其他手機(jī)需要特殊處理的在下面
});

存在的問題：