webapp 移動端的適配

時間 2019-11-17

標籤 webapp 移動端的適配欄目無線简体版

原文原文鏈接

本篇文章爲轉載html

http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html node

本文中所指Mobile WebApp是指運行在Mobile WebKit瀏覽器上的WebApp。本篇文章講解如何像傳統PC網頁開發同樣，使用定寬佈局開發WebApp，並讓WebApp適應多終端設備：瀏覽器

不使用Mobile UI框架
不使用響應式佈局
適配多終端，適配WebApp佈局寬度爲終端設備分辨率寬度
一套CSS代碼，一套佈局方案
能夠實現複雜的UI界面
支持iPhone、Android

閒扯

目前主流的WebApp UI開發框架有jQuery Mobile、Sencha Touch等，這些框架在處理不一樣設備分辨率的適配時，採用響應式佈局和基於百分比的形式顯示UI組件，UI能夠根據設備的不一樣尺寸進行呈現。app

雖然jQuery Mobile等框架很強大，可是在開發UI複雜的界面時，仍是力不從心：百分比設置寬度不能適應複雜的佈局要求。這時就須要固定寬度佈局的開發方式了，可是網上的資料都在講述「定寬網頁設計，並不適用於多終端兼容的狀況」，jQuery Mobile等框架也沒有提供良好的解決方案，固定寬度佈局在移動設備上真的不可行嗎？框架

若是真的不可行，我也不須要寫這篇文章了，哈哈。。。(不要扔板磚，下面進入正題)。。。iphone

1、iPhone、Android自帶瀏覽器如何顯示定寬佈局頁面

viewport是網頁可繪製的區域。雖然viewport可視面積和屏幕尺寸相匹配，但viewport有其本身的尺寸，肯定網頁的像素數量。也就是說，網頁的像素數量超過定義的viewport尺寸，而不是設備屏幕尺寸的屏幕面積。例如，雖然設備屏幕上多是480像素寬，viewport是800像素寬，這時網頁設計定寬800像素的頁面能夠正好徹底顯示在屏幕上。函數

例以下面的代碼片段，爲HTML文檔指定viewport屬性。viewport的寬度爲匹配設備屏幕的寬度，且禁用縮放。佈局

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

iPhone 和 Android 平臺上，WebKit 內核的瀏覽器使用 980 像素寬的視見區或邏輯尺寸，至關於viewport的width=980px。當頁面加載後，內容一般被徹底縮放以便整個頁面均可見，儘管內容會被縮放得很是小，甚至不可讀。下面使用一個簡單的定寬佈局頁面，在部分手機裏使用自帶瀏覽器訪問，顯示狀況以下：測試

能夠看到，部分手機中頁面會縮得很小，另外的手機中，頁面被放大，出現橫向滾動條。不管哪一種形式，都影響用戶的使用體驗。 ui

2、如何讓定寬佈局的WebApp在iPhone、Android自帶瀏覽器中，自適配終端，完美顯示

iPhone3GS及以上設備的Safari支持修改viewport的width來改變頁面的縮放狀況，你能夠將width指定爲頁面設計的寬度，如此一來，你的頁面正好充滿viewport並全屏顯示，而不會縮放。如當頁面設計寬度爲480px時，能夠設置viewport的width=480px：

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

遺憾的是Android4.0如下的手機系統自帶瀏覽器中，不支持設置viewport的width，不要緊，Android自帶瀏覽器支持設置另外一參數target-densitydpi來達成目的。通過測試，不一樣分辨率的手機上，以下值可讓定寬頁面設計的網頁正好填充全屏寬度，而沒有滾動條：

手機	分辨率寬度	佈局寬度480px	佈局寬度640px	devicePixelRatio
HTC Wildfire(G8)	240px	240dpi	320dpi	0.75
HTC Hero(G3)	320px	240dpi	320dpi	1
GT-I9100G	480px	240dpi	320dpi	1.5
Nexus S	480px	240dpi	320dpi	1.5
MT-870	540px	213dpi	284dpi	1.5
MX032	640px	240dpi	320dpi	1.5
note2	720px	213dpi	284dpi	2
I9308	720px	213dpi	284dpi	2
GT-N7108	720px	213dpi	284dpi	2
GT-I9228	800px	192dpi	256dpi	2

從這一庹數據中，會不會有一個放之衆Android機而皆準的公式呢？

各位願意偷懶的不用本身推了，就死個人腦細胞就能夠了，就是下方這一條了：

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;

//UI-width ：WebApp佈局寬度
//device-width ：屏幕分辨率寬度

其實在上面的一庹數據中，note2和GT-I9228的target-densitydpi 是在得出公式計算出來，並驗證了的。

將Android的處理方式應用到剛纔的頁面，在上圖中的手機中訪問以做測試：

觀察上圖可見，在所測試的手機上，測試頁面均自適配到手機屏幕的分辨率，全屏顯示且無橫向滾動條。

3、固定寬度佈局WebApp多終端自適配方法總結

1、iPhone上，指定viewport 的width等於頁面設計寬度：

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

二、Android上，根據公式計算得出target-densitydpi的值，指定到viewport：

get-target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;

//UI-width ：WebApp佈局寬度 //device-width ：屏幕分辨率寬度

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

後記

到了這一步就簡單了，寫一個函數針對平臺設置不一樣的viewport屬性，只需接收網頁設計寬度便可完成設置。

不過在部分手機上，screen.width值不不必定等於屏幕分辨率，如三星 I9100G。該如何處理，等總結完成後寫到新一篇裏。。。

補充：自適應腳本和測試Demo

補充：以前由於代碼未整理和詳細測試，未能貼出來，以致於不少童鞋在評論區留言但願發送代碼，在此表示抱歉。終於下定決心整理了一遍，並經erldy童鞋測試，應無大問題了，現貼出來，方便你們使用。若有問題和意見，請留言。這裏對erldy童鞋的建議和測試表示感謝。

代碼以下：

/*
 * 使用說明：
 * 本程序以完成固定寬度佈局的網頁在iPhone/Android設備上瀏覽時能夠適配設備屏幕寬度(豎屏瀏覽, 暫未支持橫屏瀏覽)
 * 爲目的。正常運行的環境是: iPhone/Android設備的自帶瀏覽器.
 * 若有問題,意見或建議,請到個人博客頁面留言,或發送郵件.
 * 其餘移動版瀏覽器的適配問題, 不在本程序處理範圍, 如有相關問題, 請留言或發送郵件.
 *
 * 博客頁面地址:
 * http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html
 * 郵箱: limuchen12@126.com
 * 
 * 在引入本程序後，請執行以下兩步操做:
 * 一、對於js不可以正確獲取到屏幕寬度的設備, 請使用
 *    adaptUILayout.regulateScreen.add(設備name, 設備userAgent字符串標示或正則, {
 *        width : 設備width,
 *        height : 設備height
 *    });
 *
 *    //Example:
 *    adaptUILayout.regulateScreen.add('三星 I9100G', 'GT-I9100G', {
 *        width : 480,
 *        height : 800
 *    });
 * 錄入設備屏幕尺寸, 以便程序能夠正確的處理適配.
 * 也能夠將已知設備的尺寸都錄入程序.
 *
 * ### 對於如上數據, 你們也能夠到個人博客頁面留言板塊貼出來與你們分享, 
 * 我會收集並添加到程序中去, 以互相幫助, 減小你們的總體工做量. 謝謝!
 * 
 * 二、使用以下代碼啓動適配
 *    adaptUILayout.adapt(佈局寬度);
 *
 *    Example:
 *    adaptUILayout.adapt(480);
 *
*/
var adaptUILayout = (function(){
    
    //根據校訂appVersion或userAgent校訂屏幕分辨率寬度值
    var regulateScreen = (function(){
        var cache = {};
        
        //默認尺寸
        var defSize = {
            width  : window.screen.width,
            height : window.screen.height
        };
        
        var ver = window.navigator.appVersion;
        
        var _ = null;
        
        var check = function(key){
            return key.constructor == String ? ver.indexOf(key) > -1 : ver.test(key);
        };
        
        var add = function(name, key, size){
            if(name && key)
                cache[name] = {
                    key : key,
                    size : size
                };
        };
        
        var del = function(name){
            if(cache[name])
                delete cache[name];
        };
        
        var cal = function(){
            if(_ != null)
                return _;
                
            for(var name in cache){
                if(check(cache[name].key)){
                    _ = cache[name].size;
                    break;
                }
            }
            
            if(_ == null)
                _ = defSize;
            
            return _;
        };
        
        return {
            add : add,
            del : del,
            cal : cal
        };
    })();
    

    //實現縮放
    var adapt = function(uiWidth){
        var 
        deviceWidth,
        devicePixelRatio,
        targetDensitydpi,
        //meta,
        initialContent,
        head,
        viewport,
        ua;

        ua = navigator.userAgent.toLowerCase();
        //whether it is the iPhone or iPad
        isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;
    
        //獲取設備信息,並矯正參數值
        devicePixelRatio = window.devicePixelRatio;
        deviceWidth      = regulateScreen.cal().width; 
        
        //獲取最終dpi
        targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;

        //use viewport width attribute on the iPhone or iPad device
        //use viewport target-densitydpi attribute on the Android device
        initialContent   = isiOS 
            ? 'target-densitydpi=device-dpi, width=' + uiWidth + 'px, user-scalable=no'
            : 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no';

        //add a new meta node of viewport in head node
        head = document.getElementsByTagName('head');
        viewport = document.createElement('meta');
        viewport.name = 'viewport';
        viewport.content = initialContent;
        head.length > 0 && head[head.length - 1].appendChild(viewport);                
    };
    
    return {
        regulateScreen : regulateScreen,
        adapt : adapt
    };
})();

測試代碼：

<!doctype html>

<html>
    <head>
    <meta charset="utf-8" />
        <meta name="viewport" />

        <style>
        html, body, h2, div {
            margin : 0;
            padding : 0;
        }
        
        body {
            background : #F7F7F7;
        }
        
        .download {
            float : left;
            width : 480px;
        }
        
        .download h2 {
            margin : 10px;
            font-size: 30px;
            background: rgba(0, 0, 0, .1);
            line-height: 50px;
            text-indent: 0.2em;
        }

        .projectList li {
            font-size : 30px;
            line-height : 50px;
        }
        </style>
    </head>
    
    <body>
        <div class="download">
            <h2 event="call-test-fn">my WebApp : width 480px</h2>
            <ul class="projectList">
                <li><a href="#">粑粑拉</a></li>
                <li><a href="#">哈利波特大</a></li>
                <li><a href="#">負周幾</a></li>
                <li><a href="#">尼美</a></li>
            </ul>
        </div>
        
 
        
        <script>
        adaptUILayout.adapt(480); //適配當前頁面
        </script>  
    
    </body>

    
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。