剛作完幾個簡單的響應式設計的網站項目下來，雜七雜八（二）

時間 2019-11-18

標籤幾個簡單響應設計網站項目下來雜七雜八欄目網站開發简体版

原文原文鏈接

用戶背景狀況php

一、要求支持IE7以上，chrome,safari,firefoxcss

二、要求在Win XP、Win 七、ipad、iphone或者Android移動設備上瀏覽html

三、項目不須要CMS前端

團隊狀況jquery

前端主要用Jquery及相關插件進行快速開發css3

後端比較熟悉C#.Net，phpweb

項目版本控制chrome

TortoiseSVN後端

最終技術選型瀏覽器

前端：jquery, jquery.tools作slideshow, jqXMLUtils.js處理XML文件（部分頁面內容可配置到XML文件裏面），團隊之前積累下來的用jquery寫好的slidebar 和map插件,部分地方用到CSS3的border-radius設設圓角，.net 的webpage簡單好用。

後端：沒有CMS，主要是靜態頁面及一個發送郵件程序，因而選擇了比較熟悉的.net做爲後臺進行開發，2我的非fulltime開發，週期1個月。

解決問題的思路

一開始就本身按查詢到的資料作了些簡單的靜態html頁面測試一下。

要實現響應式的話，在移動設備先對設備顯示比例做大小限制，無論你移動設備分辯率多高，寬高所見即所得而且不能改變大小。

<meta name="viewport" id="yourViewportID" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

響應式設計，咱們計劃作3個模版，large（瀏覽器寬度大於1118px）/middle(700px~1118px)/small(<700px)，網上搜資料被提得最多的是用CSS3的media-query 以下：

@media screen and (max-width: 1118px) {
/*add your css styles here*/
}
@media screen and (max-width: 700px) {
/*add your css styles here*/
}
@media screen and (max-width: 400px) {
/*add your css styles here*/
}

但這裏面有個問題就是IE7，IE8都不支持，這時網上查詢能夠引入css3-mediaqueries.js文件和PIE.js解決這些CSS3問題，但如今又出現了一個新問題，就是客戶要求在手機設備中打開時要求頁面要恰好佔滿手機瀏覽器，這就要涉及到在不一樣寬度的手機屏幕上都要按比例來靈活設置網頁元素的比例來適應。

因而因爲時間緊迫就想到了用JS來動態設置，並拋棄了media query，用JS/Jquery來實現，主要思路以下：

var browser_width = $(window).width();
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
jQuery(document).ready(function() {
var browser_width = $(window).width();
    if (isMobile.any()) {
        if (browser_width < 700) {
                var scale = browser_width / 400;/*獲取比例，要動態設置各手機的元素的樣式以達到滿屏顯示*/
                setMobileTemplate(scale);             
            }
        }
        else if (browser_width > 700 && browser_width < 1118) {
            setMiddleTemplate();
        }
        else if (browser_width > 1118) {
            setLargeTemplate();
        }
    }
    else {
        if (browser_width > 1118) {
            setLargeTemplate();

        }
        else if (browser_width > 700) {
            setMiddleTemplate();

        }
        else {
            setSmallTemplate();
        }
    }
});
var resizeFlag = 0;
$(window).resize(function() {
    var browser_width = $(window).width();
    setTimeout(function() {
        var browser_width = $(window).width();
        if (browser_width > 1118) {
            if (resizeFlag != 1) {
                setLargeTemplate();
                resizeFlag = 1;
            }
        }
        else if (browser_width > 700) {
            if (resizeFlag != 2) {
                setMiddleTemplate();
                resizeFlag = 2;
            }

        }
        else if (browser_width > 400) {
            if (resizeFlag != 3) {
                setSmallTemplate();
                resizeFlag = 3;
            }
        }
        else if (browser_width < 400) {
            if (resizeFlag != 4) {
                setSmallTemplate();
                if (isMobile.any()) {
                    var scale = browser_width / 400;/* 手機橫豎屏時設置獲取比例，要動態設置各手機的元素的樣式以達到滿屏顯示*/
                    setMobileTemplate(scale);  
                }
                resizeFlag = 4;
            }
        }

    }, 500);
});

function setLargeTemplate(){
 /*當瀏覽器寬度大於或者等於1118px時，在這用JS設置你的樣式*/
}
setMiddleTemplate(){
 /*當瀏覽器寬度大於或者等於700px並小於1118px時，在這用JS設置你的樣式*/
}
setSmallTemplate(){
 /*當瀏覽器寬度大於或者等於400px並小於700px時，在這用JS設置你的樣式*/
}
setMobileTemplate(scale){
 /*手機瀏覽器，在這用JS設置你的樣式*/
}