20 key points for mobile phone / mobile front-end development
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 webapp
The first meta tag indicates that the width of the document is forced to keep 1:1 with the width of the device, and the maximum width ratio of the document is 1.0, and users are not allowed to click the screen to zoom in;
The second meta tag is the safari private meta tag in the iPhone device, which means: allow full screen browsing;
The third meta tag is also the private tag of the iPhone, which specifies the style of the status bar at the top of safari in the iPhone;
The fourth meta tag indicates: tell the device to ignore recognizing the numbers in the page as phone numbers
2. Use of HTML5 Tags
When writing webapp, Ge suggested that front-end engineers use HTML5 instead of html4, because HTML5 can realize the experience of rich web applications that cannot be realized 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 role of the new tag of HTML5. For example, section tags can be used to define a piece of content or article area, NAV tags can be used directly to define navigation bars or tabs, and so on.
3. Discard CSS float property
In the process of project development, you can encounter the layout of content arrangement and display. If you encounter such a visual draft, I suggest you give up float and directly use display: inline block;
4. Using CSS3 border background properties
This button has rounded corner effect, inner glow effect and highlight effect. Such buttons cannot be written with CSS3. Of course, rounded corners can be written with CSS3, but highlights and inner glow cannot be written with 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 attribute.
5. Block level a label
Please ensure that each data is placed in an a tag. Why? Because on the touch phone, in order to improve the user experience, the clickable area of users should be as large as possible.
6. Adaptive layout mode
When writing CSS, I don't recommend that front-end engineers fix the width of containers (whether outer or inner). In order to fit all kinds of handheld devices, I suggest that front-end engineers use adaptive layout mode (Alipay uses adaptive layout mode), because this allows your page to display normally in iPad, iTouch, iPod, iPhone, Android, web safarik, chrome, and you do not need to reconsider the resolution of the device again.
7. Learn to use WebKit - @ r_ 75_ 2419@
In the last section, we talked about adaptive layout mode. Some students may ask: how to achieve complete adaptation on mobile devices? Thank WebKit for providing a WebKit - @ r for the display attribute_ 75_ 2419 @ value, which can help front-end engineers achieve flexible control of the box model.
8. How to remove the identification of email address in Android platform
Students who have read IOS webapp API know that IOS provides a meta tag: used to disable IOS's automatic identification of phone numbers in the page. In IOS, the email address is not automatically recognized, but on the Android platform, it will automatically detect the email address. When the user touches this email address, Android will pop up a box to prompt the user to send email. If you don't want Android to automatically recognize the email address in the page, you might as well add such a meta tag in the head
<Meta content="email=no" name="format-detection" />
9. How to remove the control bar for entering URL in IOS and Android
Your boss or Pd or interaction designer may ask you: can we make our webapp more like a nativeapp? I don't want users to see the control bar that inputs the URL? The answer is yes. We can use a simple JavaScript code to achieve this effect
setTimeout(scrollTo,0);
Please note that this code can work normally only when it is placed in window.onload, and the content height of your current document must be higher than the height of the window.
10. How to prevent users from rotating the device
I once wanted to prevent users from rotating the device, and wanted to realize the same as some clients: it can only work normally in portrait mode or landscape mode. But now I can tell you responsibly: don't think about it! You can't do it in the mobile WebKit! At least the apple webapp API has said: in order for users to browse web pages normally in Safari, we must ensure that Safari can display web content normally (that is, adaptive) when the user's device is in any direction. Therefore, we prohibit developers from blocking the browser's orientation change event. It seems that Apple's starting point is correct, Apple is really not an ordinary apple. IOS has banned developers from blocking orientation change events. What about Android? Sorry, I didn't find any information that Android prohibits developers from blocking browser orientation change events, but it can't be blocked on the Android platform.
11. How to detect that users start your webapp from the home screen
Students who have read the apple webapp API know that IOS provides safari with a function to add the current page to the home screen. Press the small plus sign in the tool at the bottom of the iPhone iPod touch or the small plus sign on the left at the top of the iPad to add the current page to the home screen of the device. A startup icon of the current page will be automatically added to the home screen of the device, Click the start icon to start your webapp quickly and conveniently. The biggest difference between the webapp launched from the main screen and the browser accessing your webapp is that it clears the toolbar above and below the browser, so your webapp is more like a nativeapp. Another difference is a standalone attribute of the navigator sub object in the window object. When the browser directly accesses the site in IOS, navigator.standalone is false. When starting webapp from the main screen, navigator.standalone is true. We can know whether the user currently accesses our webapp from the main screen through the attribute navigator.standalone. Never added to the home screen in Android!
12. How to turn off automatic keyboard capitalization in IOS
We know that in IOS, when the virtual keyboard pops up, the initial capitalization function of the keyboard is enabled by default. According to some business scenarios, we may need to turn this function off. The mobile version WebKit provides the autocapitalize attribute for the input element and turns off the default initial capitalization of the keyboard by specifying autocapitalize = "off".
13. How to completely prohibit users from opening pages in new windows in IOS
Sometimes we may need to prohibit users from opening pages in new windows. We can use the target = "of the a tag_ self "To specify that the user opens in a new window or the target attribute remains empty, but you will find that after IOS users press and hold the link for 3 seconds, IOS will pop up a list button. Users can still open the page in a new window through these buttons. In this way, the target attribute specified by the developer will become invalid, but you can specify the WebKit touc of the current element The h-callout style attribute is none to prevent IOS from popping these buttons. This technique is only applicable to IOS, but not for Android platform.
14. How to prevent users from saving pictures and copying pictures in IOS
We mentioned the - WebKit touch callout attribute of the element in tip 13. Similarly, specifying - WebKit touch callout as none for an img tag will also prohibit the device pop-up list button, so that the user can't save or copy your picture.
15. How to prohibit users from selecting text in IOS
We can prevent IOS users from selecting text by specifying the - WebKit user select attribute of the text label as none.
16. How to get the value of scroll bar in IOS
You want to get the scroll bar value in the desktop browser through document.scrolltop and document.scrollleft, but you will find that these two properties are undefined in IOS. Why? Because there is no concept of scroll bar in IOS, the value of scroll bar can be normally obtained through these two properties in Android. How can we obtain the value of scroll bar in IOS? Through window.scrolly and window.scrollx, we can get the values of 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 and define a border for it, set its width to 100%. In the process of mobile device development, we usually define the text box as 100% wide and define it as a block level element to realize the style of full screen adaptation. However, at this time, you will find that one pixel of the border (left and right) of the element will overflow the document, resulting in a horizontal scroll bar. To solve this problem, we can add a special style - WebKit - @ R_ 75_ 2419@-sizing:border-@R_ 75_ 2419@; Used to specify the size of the box, including the width of the border.
18. How to solve the problem of rounded corners in Android platforms below 2.0
If you are careful enough, when developing WAP sites, you should find that there are many problems in platforms below Android 2.0, such as border rounding.
When defining a fillet for an element, in order to be fully compatible with Android 2.0 platforms, we must define the border fillet according to the following techniques:
1 ＼ - the prefix WebKit must be added (you can not add it in IOS, but you must add it in Android); 2 ＼ if you define the style for the border, such as border: 1px solid #000; The - WebKit border radius attribute must appear after the border attribute. 3 ＼ if we have such visual elements, when the upper left corner and the upper right corner are rounded corners, we must first define the global (rounded corner value of 4 corners) - WebKit border radius: 5px; Then cover the lower left corner and lower right corner 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. Remember- The prefix WebKit must be added!
19. How to solve the problem that pages in Android platform cannot be adaptive
Although your HTML and CSS are completely adaptive, one day if you find that your page is not adaptive in Android, please first confirm whether your head tag contains the following Meta Tags:
If so, please look carefully to see if there is a value of this attribute width = device width. If not, please add it immediately!
20. How to solve Safari's automatic recognition of 5 digits in a page and automatic adding of styles in IOS 4.3
The new IOS system, version 4.3, caused a bug to safari after upgrading: even if you add the following meta tag, Safari will automatically identify the five consecutive digits in the page and re render them, that is, your CSS is invalid for the tag.
<Meta name="format-detection" content="telphone=no" />
We can solve it in a dirty way. For example, the amount of labels displayed on Alipay WAP site has been rewritten as follows:
<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>
The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. At the same time, I also hope to support a lot of programming tips!