Mobile Web page front End Development summary

Mobile web in today's development speed is rapid, as a layman in the mobile field, after this time of contact, found the front-end development This piece to do a small summary.

1. Four browser cores

1.Trident (IE): Because in the early days IE occupies a large market share, so a lot of web pages are based on this Trident standard to write, but in fact, the core of the true Web Standard support is not very good, and there are many security bugs.

2.Gecko: ( FireFox) The advantage is powerful, rich, can support many complex Web page effects and browser extension interface, the disadvantage is to consume a lot of resources, such as memory.

3.Webkit: (CHROME/SAFARI/UC) The advantage is that Webkit has a clear source structure, very fast rendering speed, the disadvantage is that the compatibility of the page code is low, will make some of the non-standard pages can not be displayed correctly.

4.Presto: (Open Gate) The Presto kernel is known as the most fast-moving kernel for browsing Web pages, and is the most compatible kernel for processing JS scripts, and works perfectly with Windows, Macs, and Linux operating systems.

The main objects of mobile development are handheld devices, most of which are iOS and Android systems, based on the WebKit kernel, which can be debugged using Chrome browser.

2. Mobile browser

The browser has gradually shifted from the traditional desktop to the mobile phone, and the competition is getting fiercer. The current domestic market mainstream mobile phone browser: UC, Baidu, open Gate, QQ, Dolphin, Safari, Chrome, these browsers are based on the WebKit kernel, compatibility problems, while the support of HTML5 and CSS3 is very good, so, Use HTML5 and CSS3 technology boldly.

When you start writing webapp, front-end engineers use HTML5 and abandon HTML4, because HTML5 can implement some of the rich Web application experiences that are not implemented in HTML4, which can reduce the workload for developers, of course, before you decide to use HTML5, Be very familiar with this, and be aware of the role of HTML5 's new label. For example, define a piece of content or an article area to use a section tag, define a navigation bar or tab to use the nav tag directly, and so on.

3. Terminal resolution

Mobile phone resolution than PC resolution is much more complex, a variety of resolutions have wood? Size gap so much wood there? This has brought a little trouble to the page production to some extent. Therefore, there must be sufficient consideration for such factors. Considering the browser adaptation, it is necessary to design and make a variety of different methods.

1) Product resolution for mainstream handset manufacturers on the market. Research has found that the current mainstream mobile phone resolution is: 480*800 pixels, 320*480 pixels, and 1280*720 pixels (720P) will be the next trend. These are very sketchy statistics, to have accurate data need to spend a lot of energy, that is the work of data analysts.

2) Resolution of the equipment held by the target group of the project. The target group of the project is the user, the user has what kind of phone resolution, to a certain extent more important than the 1th, it determines the direction of the project development.

4. Responsive Web Development

When writing CSS, I do not recommend that front-end engineers kill the width of the container, whether it is the outer container or the inner layer. In order to fit a variety of handheld devices, I recommend that front-end engineers use adaptive layout mode (Alipay uses adaptive layout mode) because doing so can make your pages on ipad, itouch, ipod, iphone, Android, Web Safarik, Chrome is displayed properly and you don't have to reconsider the device's resolution.

Responsive web development is not a groundbreaking technology change, in short, responsive web design using media query, streaming layout, liquid picture Three technology, put them together to create pages, so that the page is not only on the traditional desktop, on tablets and phones, a variety of different resolutions can be perfectly displayed. And to do this, I feel not difficult, please continue down:

1) Preparatory work:

A) plug-in Installation: Window resize. You can download and install the Google Chrome plugin via the following link https://chrome.google.com/webstore/search-extensions/window%20resize, after the installation is successful, when you adjust the browser window, In the lower right corner of the browser, there will be a grayscale hint for the current window and a size hint similar to the phone viewport. As follows:

b) Editor Installation: Subline Text2 (Support HTML5, installation CSS3 extension failed), TopStyle5 (support CSS3).

c) Clarify the difference between the viewport and the screen. The viewport is the content display area of the browser, and the screen is the physical display area of the device. For example, the width of the viewport is usually expressed in width, and the screen width is expressed in device-width. It is believed that the children's shoes, who have done the mobile pages, often see this code:

<meta name= "viewport" content= "width=device-width,initial-scale=1.0" >

Where width=device-width means to set the width of the page to the same width as the screen.

d) Responsive design Creative site collection: http://www.561.cn. There are a number of responsive web design sites for your reference and learning.

2) Journey ing:

e) Media query of responsive web design:

In order to reduce the HTTP request, I think it would be a good idea to make a media query in the CSS stylesheet instead of using link to load it in the Head section of the page. The media query format for the style table is:

@media screen and (max-width:960px) {}

The inner writing style of the curly braces. The statement is equivalent to a judgment statement, there are two conditions, one is the width of the viewport maximum not more than 960px,screen represents the display, both conditions are available, the style within the call brace.

f) responsive web design streaming layout:

The flow layout is laid out as a percentage. The most important thing is to keep an eye on the parent layer of the element, all elements are based on the parent layer. Streaming layouts are used to perfectly combine with media queries, resulting in a smooth layout change jump effect. Generally speaking, the style of media is mostly the width, padding, margin, font-size, line-height.

g) Liquid picture of responsive web design:

To implement a liquid picture, simply add the following code: img{max-width:100%;}

Web Mobile Head Writing 1

<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" >

1. First, let's take a look at some of the private meta tags in the WebKit kernel, which play a very important role in developing webapp.

<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport"/>

This meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to enlarge;

<meta content= "yes" name= "apple-mobile-web-app-capable"/>

The META tag is the safari private meta tag in the iphone device, which says: Allow full screen mode to browse;

<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style"/>

The META tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of safari;

<meta content= "Telephone=no" name= "Format-detection"/>

Meta tag means: Tell the device to ignore numbers in the page as a phone number

Other attention issues

1. In the project development process can encounter content arrangement display layout, suggest you abandon float, can use display:block directly;

2. Please ensure that each piece of data is placed in a label, why do you do so? Because on the touch phone, in order to enhance the user experience, as far as possible to ensure that the user's clickable area larger.

3. Learn to use Webkit-box.

We said that adaptive layout mode, some students may ask: how to be fully adaptive on mobile devices? Thank you very much. WebKit provides a "webkit-box" value for the display property, which helps front-end engineers to control the box model flexibly.

4, how to remove the recognition of the email address in the Android platform the students who have seen the iOS WebApp API know that iOS provides a meta tag: used to disable the automatic recognition of iOS phone numbers in a page. In iOS is not automatically recognize the email address, but on the Android platform, it will automatically detect the email address, when the user touch to this email address, Android will pop up a box prompting the user to send a message, if you do not want Android automatically identify the email address on the page, You might want to add a meta tag to the head.

<meta content= "Email=no" name= "Format-detection"/>

5. How to remove control strips for input URLs in iOS and Android your boss or PD or interaction designer may ask you: Can you make our webapp more like Nativeapp, and I don't want the user to see the control bar that entered the URL? The answer is that it can be done. We can use a simple JavaScript code to achieve this effect

SetTimeout (scrollto,0,0,0);

Please note that this code must be placed in the window.onload to work properly, and the content of your current document must be higher than the height of the window, this code can be effectively executed.

6, how to prohibit the user to rotate the device I have also wanted to prohibit users from rotating devices, but also want to implement the same as some clients: only in portrait mode or landscape mode to operate properly. But now I can be very responsible to tell you: forget it! In the mobile version of the WebKit do not! At least the Apple WebApp API has said: In order for users to navigate through the Web in Safari, we must ensure that the user's device is in any direction, and Safari is able to display the content of the Web page (that is, adaptive) as normal. So we prohibit developers from blocking browser Orientationchange events, it seems Apple's starting point is correct, Apple is really not a normal apple. iOS has banned developers from blocking Orientationchange events, what about Android? Sorry, I didn't find any information that Android prohibits developers from blocking browser Orientationchange events, but on the Android platform, it does not stop.

7, how to detect the user is the main screen to start your webapp

Anyone who has seen the Apple WebApp API knows that iOS provides Safari with the ability to add a home screen to the current page, press the small plus sign in the iphone\ipod\ipod Touch Bottom tool, or the small plus sign on the left side of the ipad's top The current page can be added to the main screen of the device, the main screen of the device will automatically add a current page of the start icon, click on the launch icon can quickly and easily start your webapp. The biggest difference between WebApp and browser-launched from the main screen is that it clears the toolbars above and below the browser, so your webapp is more like Nativeapp. Another difference is that the window is a standalone property of the Navigator child object in the image.  When the browser accesses the site directly in iOS, Navigator.standalone is false and Navigator.standalone is true when WebApp is started from the main screen. We can tell by navigator.standalone this property whether the user is currently accessing our WebApp from the main screen. Never add to the main screen in Android!

6. How to turn off automatic capitalization of keyboard in iOS we know that in iOS, when the virtual keyboard pops up, by default the keyboard is the first capitalization feature, depending on some business scenario, we may need to turn this feature off, Mobile version WebKit provides the input element with the Autocapitalize property, which turns off the default initial capitalization of the keyboard by specifying autocapitalize= "off".

Split Line *************************

Cache Control<meta http-equiv= "Cache-control" content= "No-cache"/><meta http-equiv= "Cache-control" content= "max-age=300"/>the following line:<meta http-equiv= "Cache-control" content= "max-age=0"/>has the same effect as the following line:<meta http-equiv= "Cache-control" content= "No-cache"/>some WAP browsers do not support using <meta/> tags to control caching, but they do know the meaning of the HTTP header "Cache-control:no-cache". In this case, the solution is to set the HTTP in the server-side HTTP response Head. http Refresh<meta http-equiv= "Cache-control" content= "No-cache"/><meta http-equiv= "Refresh" content= "/> " Note that this XHTML MP example requires <meta http-equiv= "Cache-control" content= "No-cache"/> If the above code is not included, the WAP The browser will simply display a copy of the document in the cache without having to connect to the server each time it is refreshed.<meta http-equiv= "Refresh" content= "15; Url=hello_world_example1.xhtml "/>some WAP browsers do not support HTTP refresh. For example, HTTP refresh works well on Openwave Mobile browser version 6.2.2, but in Nokia Mobile browser version 4.0, Sony Ericsson T610 and T68i Mobile It does not work on the word simulator.Notes<meta name= "author" content= "Mark"/> ClearType fonts<meta http-eqiv= "ClearType" content= "on| OFF ">Define page Sizeuse of IE: <meta name= "mobileoptimized" content= "> "Google search to know this can solve the problem of flash can't full screen, I have not encountered. Other uses: <meta id= "viewport" name= "viewport" content= "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; "/>

Mobile Web page front End Development summary