Response-style HTML5+CSS3 website Development Test Practice

Just using media query to fit the style is not enough, and does not take into account the behavior of the touchscreen and the unique content of the organization of different ways. Simply overlaying the mobile version of the code on top of the desktop will bring a number of requests, traffic, performance, code redundancy and many other issues. There are statistics that 86% of the mobile phone station looks small actually larger than the desktop version.

This time we give full play to the "response" flexibility to implement the one web.

Responsive development is to implement the one Web:

1. Responsive modules
The higher the degree of modularity of the original website, the more convenient to do responsive development. A page for example is organized like this:
<%include file= "path/mod1.html" args= "Data=data"/>
<%include file= "path/mod2.html" args= "Data=data"/>
If the phone under the access, the template system in the generation of this page, will be in path/under the mobile.mod1.html, there is added, otherwise add mod1.html. That is, in the same directory, there will be more than one version of the module, currently only 2 kinds: mod1.html (desktop version), mobile.mod1.html (mobile version)

The code in the response section is put together with the master code, which makes it easier to maintain. The structure of a page template is this:

Page1.html:

<%inherit file= "/base.html"/>

<%def name= "Main" >

Main content of Desktop edition

<%include file= "path/mod1.html" args= "Data=data"/>

</%def>

<%def name= "sidebar" >

Desktop Sidebar Content

</%def>

<%def name= "Mobile_main" >

<%block filter= "Collect_css" >

Mobile version of CSS

</%block>

Main content of Mobile edition. If it can be reused, direct ${self.main ()}

In many cases the content is different, such as removing unnecessary modules.

</%def>

<%def name= "Mobile_sidebar" >

Mobile Version Bottom Content

</%def>

This means that two versions can be developed/maintained at the same time. (Similarly, designers are designing a page that also requires the principles of mobile first)
In the same directory, the same file maintenance is more convenient than distributing in different warehouses.

2. Responsiveness to Css/js
Mobile version of the change is very large, in style is not the desktop version of the css+mobile version of the CSS relationship. This is thanks to our previous modifications to the static file management system. The traditional way of organizing CSS is centralized, focusing on several common files, such as Base.css + PRODUCT.CSS. And the way we are now is BASE.CSS + mod_1.css (inline) + mod_2.css (inline) + mod_3.css (inline) ... is a form of on-demand combination.

This, combined with the device's judgment, can easily become:
Mobile.base.css + mobile.mod_1.css (inline) + mobile.mod_2.css (inline) + mobile.mod_3.css (inline) ...

Css/js files, like templates, have desktop and mobile versions in the same directory. According to the situation of the access side, the automatic adaptation, on-demand combination. This will give you a more optimized mobile station.

3. Enhanced touchscreen behavior and compatible desktop events
The former refers to special events on the additional touchscreen: touchstart/touchmove/touchend and gesture Swip/pinch/rotate/shake. This is not a difficult point.

The event model for mobile browsers and desktop browsers is significantly different, and in order to fully reuse the various JS components of the desktop, the first issue is to try to be compatible with desktop events (click and mouse events).

The Click and mouse events on mobile have several points to note:
A. The Click and mouse events do not occur on elements that are not clickable, meaning that the event proxy that is tied to the document is completely invalidated
B. The mouse event occurs after the finger leaves the screen, and the order is mouseover > MouseMove > MouseDown > MouseUp
C. The Click event is last triggered. From the point of the finger off the screen, there is about 300 milliseconds delay, and may not be triggered

See:

"If the user taps a clickable element, events arrive in this order:mouseover, MouseMove, MouseDown, MouseUp, and click. The Mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the MouseMove event, no subsequent events in the sequence is sent. " Source

Android/ios does not support beforeunload events, and support for unload events is somewhat bizarre and needs to be replaced with pageshow/pagehide events.

The differences between the above events are to be eliminated as much as possible. The solution is to overwrite the original event bindings with jquery's special event mechanism. That is: Node.click (FN), mobile on the Turn Node.touchend (FN). Implementation of code: https://gist.github.com/3358036

4. Optimization and user Experience

A. Removed the apple-mobile-web-app-capable statement. Single page application to add, with the response of the development of this sentence experience is not good, jump links will pop-up window open.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
## <meta name="apple-mobile-web-app-capable" content="yes">


B. "If the user taps a nonclickable element, no events are generated." (Quoted from Apple Dev Center), so:

body {
cursor:pointer;
}


C. Set the maximum width of the picture in the content:

.topic-content img {
max-width:100%;
}


D. Loading hints, feeling like loading asynchronously.

E. The application cache itself is designed for web apps and is used differently in responsive development.
Cache the large files on the phone side:

CACHE MANIFEST
# version 0.0.1
CACHE:
${static(‘/js/jquery.min.js‘)}
${static(‘/js/do.js‘)}
${static(‘/css/mobile/base.css‘)}
${image_url(‘/pics/icon/dou.png‘)}
${static(‘/css/ui/dialog.css‘)}
${static(‘/js/ui/dialog.js‘)}
${static(‘/js/mobile/jquery.mobile.events.js‘)}

This file is dynamically generated, and the advantage is that when the file is updated, the signature in the filename changes, triggering the update of the app cache on the phone.

To determine the cache update:

if (window.applicationCache) {
window.applicationCache.addEventListener(‘updateready‘,function(){
window.applicationCache.swapCache();
}, false);
}

To avoid a dynamic page being cache, specify it in a hidden iframe. (changes, further tests are required)

F. The UI library on mobile is more necessary than the desktop version.

5. Commissioning and monitoring

With two tools Adobe Shadow and its own tcpdump are available for Android/ios.

A. Adobe shadow has been out for some time. The original problem is that it wants to go to Adobe's weinre server, slow! Finally, the latest version of 4 can already specify the local weinre server. How to enable local weinre server is another topic to search it, I started with a jar, the author's website provides various versions: Http://people.apache.org/~pmuellr/weinre/builds/1.x/
> Java-jar ~/weinre-jar/weinre.jar–boundhost 10.0.2.48   (Ifconfig find out what the specific IP is)
Weinre server startup parameters:

–httpport [PortNumber]	Change the port number of the HTTP server	8080
–boundhost [hostname | IP address |-all-]	Change the host name. If you use the default localhost, you will not be able to access the server from another machine	localhost
–verbose [true | false]	Record standard Output behavior	False
–debug [true | false]	Verbose operation log output to standard output	False
–deathtimeout [seconds]	Specify timeout	3

Install Shadow and install Shadow client on your phone.

Specify the local server:
The phone opens shadow client to find the IP directly. Shadow actually is to weinre packaging a layer, its inspector is actually weinre tune Web Inspector debugging.

B. Use tcpdump to monitor HTTP requests (see here). Steps:

Step 1: Build a WiFi hotspot
Step 2: Capture TCP's traffic with the tcpdump command:
sudo tcpdump-i en1-n-S 0-w group.pcap TCP or Port 53
(Refer to Tcpdump usage http://www.tcpdump.org/tcpdump_man.html)
Step 3: Mobile phone linked to the hotspot, open the website (first clear cache)
Step 4:ctrl+c Stop Tcpdump,log save to the specified Group.pcap file. Pcap (Packet capture)
Step 5:pcap turn into Har file to browse, http://pcapperf.appspot.com or import into Charles's view is also very convenient, see separately:

C. Online tool: Mobitest.akamai.com (said to be open source)