20 points to pay attention to in mobile front-end development

[[164368]]

Mobile front-end development is gradually becoming the mainstream of front-end technology. In fact, you don't need to master additional technologies compared to ordinary PCs. However, the skills you use on PC Web are not applicable to mobile Web in most cases. You must know the points to pay attention to. Of course, the mobile Web gives people the impression that it is a battlefield of H5 and CSS3. There are enough advanced technologies waiting for you to master. In this regard, you can happily say: let IE go to hell.

1. First, let's take a look at some private meta tags in the webkit kernel. These meta tags play a very important role in developing webapps.

 <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 means: force the width of the document to be 1:1 with the width of the device, and the maximum width ratio of the document is 1.0, and do not allow users to click on the screen to zoom in and browse;
• The second meta tag is a private meta tag for Safari on iPhone devices, which means: allow full-screen mode browsing;
• The third meta tag is also a private tag for iPhone, which specifies the style of the status bar at the top of Safari on iPhone;
• The fourth meta tag says: Tell the device to ignore recognizing the numbers in the page as a phone number.

2. Use of HTML5 tags

When starting to write a webapp, front-end engineers are advised to use HTML5 instead of HTML4, because HTML5 can provide rich web application experiences that cannot be achieved in HTML4, which can reduce a lot of workload for developers. Of course, before you decide to use HTML5, you must be very familiar with it and know the functions of new HTML5 tags. For example, you can use the section tag to define a content or article area, and you can use the nav tag to define a navigation bar or tab.

3. Abandon the CSS float property

During the project development process, you may encounter a layout where content is arranged and displayed. If you encounter such a visual draft, it is recommended that you give up float and directly use display:inline-block.

4. Use CSS3 border and background properties

This button has rounded corners, inner glow and highlight effects. Such a button cannot be written using CSS3. Of course, rounded corners can be written using CSS3, but highlights and inner glow cannot be written using CSS3.

At this time, you might as well use -webkit-border-image to define the style of this button.

-webkit-border-image is a very complex style property.

5. Block-level a tag

Please ensure that each piece of data is placed in an a tag. Why do you do this? Because on touch phones, in order to improve the user experience, the user's clickable area should be as large as possible.

6. Adaptive layout mode

When writing CSS, I do not recommend that front-end engineers set the width of the container (either the outer container or the inner container) to a fixed value. In order to adapt to various handheld devices, I recommend that front-end engineers use the adaptive layout mode (Alipay uses the adaptive layout mode), because doing so will allow your page to be displayed normally on iPad, iTouch, iPod, iPhone, Android, web Safari, and Chrome, and you do not need to consider the device resolution again.

7. Learn to use webkit-box

In the previous section, we talked about adaptive layout mode. Some students may ask: How to achieve full adaptiveness on mobile devices? Thank you WebKit for providing a webkit-box value for the display property, which can help front-end engineers to flexibly control the box model.

8. How to remove the recognition of email addresses on the Android platform

Anyone who has seen the iOS webapp API knows that iOS provides a meta tag: used to disable iOS's automatic recognition of phone numbers on a page. Email addresses are not automatically recognized on iOS, but on the Android platform, they are automatically detected. When a user touches this email address, Android will pop up a box to prompt the user to send an email. If you don't want Android to automatically recognize the email address on the page, you might as well add a meta tag like this in the head:

 <meta content= "email=no" name= "format-detection" />

9. How to remove the URL input control bar in iOS and Android

Your boss, PD or interaction designer may ask you: Can we make our webapp more like nativeapp? I don’t want users to see the control bar for entering the URL?

The answer is yes. 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 window.onload to work properly, and the content height of your current document must be higher than the height of the window for this code to be effectively executed.

10. How to prevent users from rotating their devices

I once wanted to prevent users from rotating their devices, and I also wanted to implement something like some clients: it can only run normally in portrait mode or landscape mode. But now I can tell you responsibly: forget it! It is not possible in the mobile version of webkit!

At least Apple webapp API has said: In order to allow users to browse the web normally in Safari, we must ensure that Safari can display web content normally (that is, adaptive) no matter where the user's device is. Therefore, we prohibit developers from blocking the browser's orientationchange event. It seems that Apple's starting point is correct. Apple is indeed not an ordinary Apple.

iOS has prohibited developers from blocking orientationchange events, what about Android? Sorry, I haven't found any information saying that Android prohibits developers from blocking browser orientationchange events, but on the Android platform, it is indeed impossible to block it.

11. How to detect whether the user launches your webapp from the home screen

Those who have read Apple's webapp API know that iOS provides Safari with a function to add the current page to the home screen. By pressing the small plus sign in the tool at the bottom of the iPhone, iPad, or iPod Touch, or the small plus sign on the top left of the iPad, you can add the current page to the device's home screen. A launch icon of the current page will be automatically added to the device's home screen. Clicking the launch icon can quickly and conveniently launch your webapp. The biggest difference between launching a webapp from the home screen and accessing your webapp from a browser is that it clears the toolbars above and below the browser, so that your webapp is more like a nativeapp. Another difference is the standalone property of the navigator sub-object in the window object. When the browser directly accesses the site in iOS, navigator.standalone is false, and when launching the webapp from the home screen, navigator.standalone is true. We can use the navigator.standalone property to know whether the user is currently accessing our webapp from the home screen.

There is no such thing as adding to home screen in Android!

12. How to turn off automatic capitalization on the iOS keyboard

We know that in iOS, when the virtual keyboard pops up, the keyboard has the capitalization function enabled by default. Depending on some business scenarios, we may need to turn off this function. The mobile version of webkit provides the autocapitalize attribute for the input element. You can turn off the keyboard's default capitalization by specifying autocapitalize="off".

13. How to completely prevent users from opening pages in new windows in iOS

Sometimes we may need to prohibit users from opening a page in a new window. We can use the target="_self" of the a tag to specify that the user should open the page in a new window, or keep the target attribute empty. However, you will find that after an iOS user presses and holds the link for 3 seconds, iOS will pop up a list of buttons. Users can still open the page in a new window through these buttons. In this case, the target attribute specified by the developer is invalid. However, you can prohibit iOS from popping up these buttons by specifying the -webkit-touch-callout style attribute of the current element as none. This trick only applies to iOS and is invalid for Android platforms.

14. How to prevent users from saving or copying pictures in iOS

We mentioned the -webkit-touch-callout attribute of the element in Tip 13. Similarly, specifying -webkit-touch-callout to none for an img tag will also disable the device pop-up list button, so that users cannot save or copy your images.

15. How to prevent users from selecting text in iOS

We can prevent iOS users from selecting text by specifying the -webkit-user-select attribute of the text tag to be none.

16. How to get the value of the scroll bar in iOS

In desktop browsers, you can get the scroll bar value through document.scrollTop and document.scrollLeft, but in iOS you will find that these two properties are undefined. Why? Because there is no concept of scroll bar in iOS. In Android, you can get the scroll bar value through these two properties. So how do we get the scroll bar value in iOS?

Through window.scrollY and window.scrollX we can get the values ​​of the y-axis and x-axis scroll bars of the current window.

17. How to solve box border overflow

When you specify a block-level element, define a border for it, and set its width to 100%, we usually define the text box as 100% width in the process of mobile device development, and define it as a block-level element to achieve full-screen adaptive style, but at this time you will find that the border (left and right) of the element will overflow the document by 1 pixel each, resulting in a horizontal scroll bar. To solve this problem, we can add a special style -webkit-box-sizing:border-box; to specify the size of the box, including the width of the border.

18. How to solve the rounded corner problem in platforms below Android 2.0

If you are careful enough, when developing WAP sites, you will find that there are many problems in platforms below Android 2.0, such as the problem of border rounding.

When defining rounded corners for an element, to be fully compatible with platforms below Android 2.0, we must follow the following techniques to define the border rounded corners:

1. The -webkit prefix must be added (in iOS, you can not add it, but in Android, it must be added);
2. If you define a style for the border, such as border:1px solid #000;, then the -webkit-border-radius attribute must appear after the border attribute.
3. If we have such a visual element, when the upper left and upper right corners are rounded, we must first define the global (rounded value of the 4 corners) -webkit-border-radius: 5px; and then cover the lower left and lower right corners in turn, -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-border: 0; otherwise, all right angles will be displayed on platforms below Android 2.0. And remember! The prefix -webkit must be added!

19. How to solve the problem that the page cannot adapt to the Android platform

Although your HTML and CSS are fully adaptive, if one day you find that your page is not adaptive when displayed on Android, first make sure that your head tag contains the following meta tags:

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

If so, please check carefully to see if there is a value of width=device-width for this attribute. If not, please add it immediately!

20. How to solve the problem of Safari automatically identifying and adding styles to 5-digit numbers in pages in iOS 4.3

The latest iOS 4.3 version has caused a bug in Safari after the upgrade: even if you add the following meta tag, Safari will still automatically recognize the 5 consecutive numbers in the page and re-render the style, which means that your CSS is invalid for this tag.

 <meta name= "format-detection" content= "telphone=no" />

We can use a more dirty way to solve it. For example, we rewrite the label showing the amount in the Alipay WAP site as follows:

<button class = "t-balance" style= "background:none;padding:0;border:0;" > 95009.00 </button> yuan