刚做完几个简单的响应式设计的网站项目下来，杂七杂八 （二）

用户背景情况

1、要求支持IE7以上，chrome,safari,firefox

2、要求在Win XP、Win 7、ipad、iphone或者Android移动设备上浏览

3、项目不需要CMS

团队情况

前端主要用Jquery及相关插件进行快速开发

后端比较熟悉C#.Net，php

项目版本控制

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设置你的样式*/
}

 

按这种思路来处理，页面的兼容性很好，QA各种操作系统，各种浏览器，各种移动设备测试都pass了。第一个网站搞下来后，后面几个网站同理如法炮制，优化了代码，优化了图片的预载等等，做起来更加顺手，更快完成