PC-side, mobile-side page adaptation and compatibility processing

First, about mobile-side compatibility

At present, the cross-terminal solution is divided into two major camps: a set of resources vs two sets of resources.

The first is to achieve a set of resources to adapt all terminals through the response or the page terminal judgment;

The second is to use the terminal to determine the two sets of resources to adapt to all terminals.

These two ideas we can not categorically say which is more preferred, is the so-called "suitable is the best".

Idea one: through response or page terminal judgment to achieve a set of resources to adapt all terminals

Advantage: just maintain a set of resources, low maintenance costs.

disadvantage: the need to load the various resources suitable for each terminal, in different terminals through the response layout to achieve different display, some interactive effects need to do terminal judgment in the page, the cost is larger, if the picture resources for a set, some pictures in ultra-high-resolution devices (such as the iphone series) will be distorted, And in the non-wifi situation even if the delay loading is also prone to load slow situation.

Technology Selection:jquery (or native JS, etc.) + responsive + front-end Module loader (SEAJS or REQUIREJS, etc.) + CSS preprocessor (sass or less). jquery's better compatibility-fit response can be implemented across terminals at relatively low cost. Front-end Module loader is mainly responsible for loading on demand, in order to improve page loading speed, CSS preprocessor variables, operations, nesting and other characteristics can greatly improve the efficiency of the manual calculation of response, mother no longer worry about my proportion is wrong. Of course, the two can refer to demand and cost to decide whether to adopt.

Idea two: through the terminal to determine the two sets of resources to adapt to all terminals

Advantages: can be based on different end of the personality design and personalized information push and can be loaded on demand, such as mobile can be combined with gravity induction, different gestures to do a variety of cool drag effect, PC page can not be limited by the flow of traffic to the effect of PC-side.

disadvantage: need to maintain two sets of resources, maintenance costs increased.

Technology Selection:zepto (or XUI-Mobile lightweight framework) + responsive + front-end Module loader + CSS preprocessor + terminal adaptation. Zepto, as a mobile version of jquery, continues its own advantages, greatly optimizing the mobile API and eliminating the redundant code compatible with "non-modern browsers", and becoming a handy JS frame for mobile, which is the perfect choice for students accustomed to jquery!

Terminal adaptation is generally achieved by UA judgment. UA judgment can be placed on the server can also be placed on the page, in the proxy servers do jump faster, more accurate and do not go to the application layer, even if the browser is disabled JS can still jump to the corresponding address, while adhering to the public service in the service side of the cloud service concept, we chose to do terminal adaptation through Proxy server.

User-agent sniffing, that is, when a Web browser sends a Web page or resource request, a user-agent header is sent as part of the HTTP request, so we can obtain the desired information on the server side and then judge and direct the user to the corresponding page address.

Second, the website on the PC on the mobile side what to do?

If the mobile side of the viewable area (320-768), most of the site will be too narrow to show confusion, so the browser by default viewport set to a wider value of 980px or 1024px, at least to ensure that the PC website can be displayed on the mobile side, but there is only a horizontal scroll bar.

(i) Several concepts

1.css pixels

• The units measured in HTML are calculated using PX, which tends to be 1 css px = 1 physical pixels in the PC
• CSS pixels are abstract and relative, the 1px corresponds to different device pixels in different devices, the IPHONE3 resolution is 320*480 that is css 1px = 1 physical pixels, iphone4 resolution 640x960 But the screen size does not change, which means that the same area pixels is 1 time times more CSS 1px = 2 physical pixels;

2. Physical pixels

• Represents the number of pixels per inch, the higher the value, the higher the density of the screen to display the image

3. Resolution

• The more pixels the display can display, the more pixel the monitor displays, the finer the picture, and the more information the same screen area can display

4.devicePixelRatio

• Window.devicepixelradio = physical pixels/css pixels in iphone4 devicepixelratio=2 is 1css pixels = 2 physical pixels
• Devicepixelratio has some compatibility issues with different browsers and is not completely reliable

5.layout Viewport

• The default viewport,css layout for mobile devices is calculated using layout viewport as the reference system.
• Document.documenElement.clientWidth get
• Dynamic setting when the dimension is

6.visual Viewport

• Represents the size of the browser window, which becomes smaller when the user zooms in on the browser
• Window.innerwidth get

7.ideal Viewport

• Screen size device screen size units are physical pixels
• Screen.width Get the screen size is constant
• In this viewport the user does not need to zoom and scroll horizontally to see all the contents of the site normally
• Set the mobile website generally with this viewport, the width of ideal viewport is equal to the width of the device screen, so that in any resolution, those for the ideal viewport design of the site can be perfectly presented to the user.

(ii) How to achieve screen adaptation

Need to use

1 <meta name="viewport" content="width=device-width" >

There are 6 common properties in Meta viewport:

• Width Set layout viewport a positive integer or string ' Width-device '
• Initial-scale Set the initial zoom value of the page, number or decimal
• Minimum-scale allows the user's minimum scale value number or decimal
• Maximum-scale allows the user's maximum zoom value number or decimal
• Height sets the altitude of the layout viewport, which is seldom used
• User-scaleabel whether the user is allowed to scale ' no ' or ' yes ' and there are 2 other two attributes that require special attention

• TARGET-DENSITYDPI in the device of Andriod 4.0, it is not supported to set up viewport width,android with browser support settings target-densitydpi to achieve the purpose;

  target-densitydpi = ui-width/device-width*window.devicepixelration*160//ui-width: Layout width//device-width: screen resolution width iphone4 a pixel that uses the device's own physical screen for 640//target-densitydpi=device-dpi, no default scaling occurs

• Miniual-ui iOS safari for meta table days added properties, the page load is hidden at the top of the address bar and the bottom of the navigation bar

(c) Related code explanation

//Mobile page design 480*854 proportional//dpi = 480/screen.width*window.devicepixelratio*160;//scalevalue = screen.width/480;//control adaptation Divided into 5 combinations */width + target-densitydpi (Calculated) */<Metaname= "Viewport"content= "Width=480,target-densitydpi=dpi,minimal-ui">/ * Width * /<Metaname= "Viewport"content= "Width=480,minimal-ui">/ * width+target-densitydpi=device-dpi * /<Metaname= "Viewport"content= "Width=480,targrt-densitydip=device-dip,minimal-ui">/ * Width+initial-scale * /<Metaname= "Viewport"content= "Width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui">/ * targrt-densitydpi * /<Metaname= "Viewport"content= "Targrt-densitydpi=dpi,minimal-ui">//Set 5 times in order to fit until Math.Abs (window.innerwidth-480)<=10indicates that the viewport setting is correct. 

(four) screen

JS Code Control

Window.addeventlistener ("Orientationchange", function () {        this.isorietation = true;        This.changeoriention ();    }); /The recommended event is to perform a unified management through a listening completion, and then perform the corresponding event after the screen is switched on and off

CSS Control

Defines the style of the horizontal display @media screen and (Orientation:landspace) {...} Defines the style of the portrait display @media screen and (orientation:portrait) {...} A special style for a particular size vertical screen width of 768px conforms to the conditions of the general ipad @media only screen and (orientation:portrait) and (device-width:768px) {...}

Reference: Http://www.uisdc.com/mobile-compatibility-analysis

http://www.ituring.com.cn/article/130015

PC-side, mobile-side page adaptation and compatibility processing