Just finished a few simple responsive design site projects down, assorted (ii)

Background of the user

1, request support IE7 above, Chrome,safari,firefox

2. Request to browse on Win XP, Win 7, ipad, iphone or Android mobile device

3, the project does not need CMS

Team situation

The front end is developed quickly with jquery and related plugins

Backend more familiar with c#.net,php

Project version Control

TortoiseSVN

Final technology Selection

Front-end: jquery, Jquery.tools do slideshow, jqxmlutils.js processing XML files (part of the page content can be configured into XML files), the team previously accumulated with jquery written slidebar and map plug-ins, Some places use CSS3 's Border-radius to set rounded corners, and the. NET webpage is simple and useful.

Backend: No CMS, mainly static pages and a sending mail program, so chose the more familiar. NET as a background to develop, 2 people non-fulltime development, cycle 1 months.

The idea of solving the problem

At the beginning, I did some simple static HTML page tests by the data you have queried.

To implement the response, the device display scale is the size limit on the mobile device, no matter how high the resolution of your mobile device is, what you see is what you gain and cannot change the size.

<name= "Viewport"  ID= "Yourviewportid"  content= " Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no "/>

Responsive design, we plan to do 3 templates, large (browser width is greater than 1118px)/middle (700px~1118px)/small (<700px), the Internet search data was raised by CSS3 Media-query as follows:

{/*Add your CSS styleshere*/}  {/*Add your CSS styleshere*/}{/*Add your CSS styles here
    */}

But there's a problem with IE7,IE8 that doesn't support it. At this time online query can introduce css3-mediaqueries.js file and pie.js to solve these CSS3 problems, but now there is a new problem, is that the customer asked to open in the mobile device requires the page to just fill the phone browser, which involves in different width of the mobile phone screen to be proportional to the flexible setting of the network The proportions of the page elements to accommodate.

Because of the time is urgent to think of using JS to dynamically set, and abandoned the media query, with Js/jquery to achieve, the main ideas are as follows:

varBrowser_width =$ (window). width ();varIsMobile ={Android:function() {        returnNavigator.userAgent.match (/android/i); }, BlackBerry:function() {        returnNavigator.userAgent.match (/blackberry/i); }, IOS:function() {        returnNavigator.userAgent.match (/iphone|ipad|ipod/i); }, Opera:function() {        returnNavigator.userAgent.match (/opera mini/i); }, Windows:function() {        returnNavigator.userAgent.match (/iemobile/i); }, any:function() {        return(Ismobile.android () | | ismobile.blackberry () | | Ismobile.ios () | | Ismobile.opera () | |ismobile.windows ()); }};jquery (document). Ready (function() {varBrowser_width =$ (window). width (); if(Ismobile.any ()) {if(Browser_width < 700) {                varscale = browser_width/400;/*get the proportions to dynamically set the style of the elements of each phone to achieve full screen display*/setmobiletemplate (scale); }        }        Else if(Browser_width > && browser_width < 1118) {setmiddletemplate (); }        Else if(Browser_width > 1118) {setlargetemplate (); }    }    Else {        if(Browser_width > 1118) {setlargetemplate (); }        Else if(Browser_width > 700) {setmiddletemplate (); }        Else{setsmalltemplate (); }    }});varResizeflag = 0; $ (window). Resize (function() {    varBrowser_width =$ (window). width (); SetTimeout (function() {        varBrowser_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 ()) {varscale = browser_width/400;/*mobile phone to set the ratio of the screen, to dynamically set the style of the elements of each phone to achieve full screen display*/setmobiletemplate (scale); } Resizeflag= 4; }        }    }, 500);});functionsetlargetemplate () {/*when the browser width is greater than or equal to 1118px, in this use JS to set your style*/}setmiddletemplate () {/*when the browser width is greater than or equal to 700px and less than 1118px, in this set your style with JS*/}setsmalltemplate () {/*when the browser width is greater than or equal to 400px and less than 700px, in this set your style with JS*/}setmobiletemplate () {/*Mobile Browser, in this set your style with JS*/}

According to this approach, the compatibility of the page is very good, QA various operating systems, various browsers, all kinds of mobile device testing pass. The first site after the same, the following several sites the same as the same, optimized the code, optimize the image of the pre-load and so on, do it more smoothly, faster completion