Summary of Mobile Platform Web Front-End development skills

Turn from: http://blog.csdn.net/haojie5/article/details/7180692

You may be working on or preparing to participate in a Wepapp project, you may be in Google search for mobile development related articles, you may be a professional Web front-end engineer, you may want to learn mobile front-end development technology, if you are what I said, Oh then this article will bring you an unexpected surprise. When you see this article, the elder brother has assumed that you are a senior Web front-end engineer, and if you are not, you may meet a number of professional terms or front-end technologies (including Web, Mobile) that you do not understand or understand. But it doesn't matter, give yourself a little confidence, read down attentively ...

Since the launch of the iphone and Android mobile operating systems, there has been a new noun-webapp in the internet world (meaning web-based applications running at high-end mobile terminals).

Developers know that there are two applications in high-end smartphone systems: one based on local (operating system) and one that is based on the webapp of high-end machine browsers, which is mainly explained in this article. What's the difference between WebApp and native app?

Native APP: development costs are very large generally used in the development of Java, C + +, objective-c Update experience is poor, but also more trouble every time the release of a new version, need to do version packaging, and requires a manual update by the user (some applications need a nasty hint, even if they do not need to be manually updated by the user). That's cool. Because Native app can call UI controls in iOS as a UI method, it can implement some very cool interactions that WebApp can't implement Native app is Apple's approved Native app that Apple can endorse as a trusted stand-alone software. Can be sold on Apple Stroe, but web apps are not.

Web App: Low development cost using web development technology can easily complete the development of web App upgrade simple upgrade do not need to notify users, update the file on the server, the user has no sense of maintenance more relaxed and the general Web, maintenance is relatively simple, It's actually a site

WebApp plainly is an iphone, Android optimized Web site, it uses the technology is nothing more than HTML or HTML5, CSS3, JavaScript, server technology Java, PHP, ASP.

Of course, because these high-end smartphone (Iphone, Android) built-in browsers are based on the WebKit kernel, so when developing webapp, most of them use HTML5 and CSS3 technology to do the UI layout. When using HTML5 and css3l UI, if you follow the development of general web Development using HTML4 and CSS2, this will lose the nature of the webapp, and some effects can not be achieved, so here is back to our theme- WebApp layout method and technology.

Here is a description of the mobile platform front-end development that is meant for high-end smartphones (such as the iphone, Android) to do site adaptation is also WebApp, not for ordinary mobile phone development WAP 2.0, so before reading this article, You need to have a certain understanding of the WebKit kernel browser, you need to have a certain understanding of HTML5 and CSS3. If you already know something about it, start reading it now ... 1, first let's look at some of the proprietary META tags in the WebKit kernel, which play a very important role in developing WebApp [HTML]   View plain copy <meta content= "width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0; "  name= "Viewport"  />   <meta content= "yes"  name= " Apple-mobile-web-app-capable " />   <meta content=" Black " name=" Apple-mobile-web-app-status-bar-style " />   <meta content=" Telephone=no " name=" Format-detection  />  
The first meta tag says: Force the width of the document to 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to enlarge the view; The second meta tag is the safari private meta tag in the iphone device, which says: Allow Full-screen mode browsing; the third meta tag is also the iphone's private label, which specifies the style of the top state bar in the iphone; The fourth meta tag says: Tell the device to ignore the recognition of numbers in the page as phone numbers; 2, use of the HTML5 label

When I started writing webapp, I suggested that the front end engineers use HTML5 and give up HTML4, because HTML5 can implement a rich Web application experience that cannot be implemented in HTML4, and can reduce the amount of work that developers have to do, and of course, before you decide to use HTML5, Be sure to be very familiar with this, and be aware of the role of HTML5 's new label. For example, you can define a piece of content or an area of the article using the section label, define a navigation bar or tab to use the nav tag directly, and so on. 3, discard the CSS float property

In the project development process can encounter content arrangement arrangement display layout, if you meet this kind of visual manuscript, elder brother suggest you give up float, can use display:block directly; 4, the use of CSS3 border background properties

This button has rounded angle effect, has the inside luminous effect also has the high light effect, such button use CSS3 writing is unable to write out, of course rounded angle may use CSS3 to write, but the high light and the inside glow but cannot use CSS3 to write, This time you might want to use-webkit-border-image to define the style of the button. -webkit-border-image is a very complex style attribute. 5, block Grade A label

Make sure you put each piece of data in a label A and why. Because on the touch phone, to enhance the user experience, as much as possible to ensure that the user's clickable area is larger. 6. Adaptive layout Mode

When writing CSS, I do not recommend that the front-end engineer set the width of the container (whether it is an outer container or an inner layer) dead. To fit a variety of handheld devices, I recommend that the front-end engineers use adaptive layout mode (Alipay uses adaptive layout mode) because it allows you to make your pages available on the ipad, itouch, ipod, iphone, Android, Web Safarik, Chrome can be displayed properly and you don't have to reconsider the resolution of the device. 7. Learn to use Webkit-box

In the previous section, we talked about adaptive layout patterns, and some students might ask: how to be completely adaptive on a mobile device. Thank you very much. WebKit provides a Webkit-box value for the display property, which helps the front-end engineers to control the box model flexibly. 8, how to remove the Android platform in the identification of the mailbox address

Students who have seen the iOS WebApp API know that iOS provides a meta tag: To disable the automatic identification of phone numbers on the page that iOS uses. The email address is not automatically recognized in iOS, but on the Android platform it automatically detects the email address, and when the user comes to the email address, Android pops up a box prompting the user to send the email, if you don't want Android to automatically identify the email address in the page, You might as well add such a meta tag in the head [HTML] view plain copy <meta content= "Email=no" name= "Format-detection"/>
9, how to remove the iOS and Android in the input URL of the control bar

Your boss or PD or interaction designer may ask you to 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 [HTML] view plain copy settimeout (scrollto,0,0,0);

Please note that this code must be placed in the window.onload to work properly, and your current document must be higher than the height of the window, this code can be effectively executed. 10. How to prohibit users from rotating equipment

I used to want to prohibit users from rotating devices, but also to achieve the same as some clients: only in portrait mode or landscape mode to normal operation. But now I can be very responsible to tell you: Forget it! is not available in the mobile version of the WebKit.

At least the Apple WebApp API has said: "In order for users to browse the Web in Safari, we have to ensure that the user's device is in any location, Safari can display the content of the Web page (that is, adaptive), So we're banning developers from blocking browser Orientationchange events, which seems to be the right thing to do, and Apple is not the average Apple.

iOS has banned developers from blocking Orientationchange events, so Android. Sorry, I didn't find any information that Android prohibits developers from blocking browser Orientationchange events, but it's not really going to stop on the Android platform. 11, how to detect the user is through the main screen to start your webapp

Students who have seen the Apple WebApp API know that iOS provides Safari with the ability to add a home screen to the current page, press the small plus sign in the bottom tool on the iphone ipod Touch, or the small plus on the left side of the ipad, You can add the current page 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 start icon can be quick and easy to start your webapp.

The biggest difference between the WebApp and the browser that you start from the main screen is that it clears the sidebar above and below the browser so that your webapp is more like Nativeapp, Another difference is a standalone property of the Navigator child object in the window pair image.

When the browser directly accesses the site in iOS, Navigator.standalone is false, and when you start WebApp from the primary screen, Navigator.standalone is true, we can navigator.standalone this property to see if the user is currently accessing our WebApp from the master screen.
It's never been added to the main screen in Android. 12. How to turn off the automatic capitalization of the keyboard in iOS

We know that in iOS, when the virtual keyboard pops up, the keyboard is turned on by default, according to some business scenarios, we may need to turn off this feature, mobile version WebKit provides autocapitalize for input elements, Turn off the keyboard default initial capitalization by specifying autocapitalize= "off". 13, how to completely prevent the iOS users in the new window to open the page

Sometimes we may need to stop the user from opening the page in a new window, and we can use the target= "_self" of the A tag to specify that the user opens in a new window, or