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 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 the user is not allowed to click on the screen to enlarge and browse;
The second meta tag is the safari private meta tag in the iPhone device, which means: allows full-screen browsing;
The third meta tag is also a private tag of the iPhone, which specifies the style of the status bar at the top of the safari in the iPhone;
The fourth meta tag indicates: Tell the device to ignore identifying the numbers in the page as a phone number
2. Use of HTML5 tags
When I started writing a webapp, I suggested that front-end engineers use HTML5 and give up HTML4, because HTML5 can achieve the rich WEB application experience that cannot be achieved in HTML4, which can reduce the developer's workload. Of course, before you decide to use HTML5, you must be very familiar with this and know the role of the new tags of HTML5. For example, you can use section tags to define a piece of content or article area, and you can use nav tags to define navigation bars or tabs, etc.
3. Give up the CSS float attribute
During the project development process, you will encounter the layout of content arrangement and display. If you encounter such a visual draft, I suggest you give up float and use display:inline-block directly;
4. Use CSS3 border background properties
This button has a rounded corner effect, an inner luminous effect and a highlight effect. Such buttons cannot be written in CSS3. Of course, rounded corners can be written in CSS3, but highlights and inner luminous cannot be written in 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 tag
Please make sure to put each piece of data in a tag, why do this? Because on touch phones, in order to improve user experience, the user's clickable area is as large as possible.
6. Adaptive layout mode
When writing CSS, I do not recommend that front-end engineers determine the width of the container (whether it is an outer container or an inner layer). In order to adapt to various handheld devices, I recommend front-end engineers to use adaptive layout mode (Alipay uses adaptive layout mode), because doing so can allow your page to be displayed normally on iPad, itouch, ipod, iPhone, Android, web safarik, and Chrome, and you don’t need to consider the resolution of the device again.
7. Learn to use webkit-box
In the previous section, we talked about the adaptive layout mode. Some students may ask: How to be fully adaptable on mobile devices? Thanks to webkit for providing a webkit-box value for the display attribute, which can help front-end engineers to achieve flexible control of the box model.
8. How to remove the identification of email address in Android platform
Students who have read the iOS webapp API know that iOS provides a meta tag: to disable iOS's automatic recognition of phone numbers on the page. The email address is not automatically recognized in iOS, 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 emails. If you don't want Android to automatically recognize the email address on the page, you might as well add a meta tag in the head
<meta content="email=no" name="format-detection" />
9. How to remove the control bar of input URL in iOS and Android
Your boss or PD or interaction designer may ask you: Can we make our webapp more like native app? I don't want users to see the control bar that inputs the url?
The answer is possible. 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 to work normally, and this code can be effectively executed when the content height of your current document must be higher than the height of the window.
10. How to prohibit users from rotating the device
I once wanted to ban users from rotating the device, and I also wanted to implement it like some clients: it can only work properly in portrait mode or landscape mode. But now I can tell you very responsibly: Don’t think about it! It can’t be done in the mobile version of webkit!
At least the Apple webapp API has already mentioned: In order for users to browse web pages normally in safari, we must ensure that safari can display web page 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 indeed not an ordinary Apple.
iOS has banned developers from blocking orientationchange events, so what about Android? Sorry, I didn't find any information that Android prohibits developers from blocking browser orientationchange events, but on Android platform, it is indeed impossible to block it.
11. How to detect that users are launched on your webapp via 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 bottom tool at the iPhone ipodipod touch, or the small plus sign on the left side of the top and top of the iPad to add the current page to the home screen of the device. A startup icon for the current page will be automatically added to the home screen of the device. Clicking the startup icon can quickly and conveniently start your webapp. The biggest difference between accessing your webapp from the home screen and the browser is that it clears the toolbars above and below the browser, so that your webapp will look more like a native app. Another difference is that a standalone property of the navigator child object in the window object. When a browser directly accesses the site in iOS, it is false. When starting the webapp from the home screen, it is true. We can use this attribute to know whether the user is currently accessing our webapp from the home screen.
It's never added to the home screen in Android!
12. How to turn off automatic capitalization of keyboard in iOS
We know that in iOS, when the virtual keyboard pops up, the keyboard is enabled by default with the function of capitalization of the initial letter. According to some business scenarios, we may need to turn off this function. The mobile version of webkit provides the autocapitalize attribute for the input element, and the default capitalization of the keyboard is turned off 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 a new window. We can use the target="_self" of the a tag 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 the link for 3 seconds, a list button will pop up in iOS. The user can still open pages in a new window through these buttons. In this way, the target attribute specified by the developer will be invalid, but iOS can be prohibited from popping up these buttons by specifying that the current element's -webkit-touch-callout style attribute is none. This trick only applies to iOS and does not work for Android platforms.
14. How to prohibit users from saving pictures＼Copying pictures in iOS
In the 13th trick, we mentioned the -webkit-touch-callout attribute of the element. Also, specifying -webkit-touch-callout as none for an img tag will also prohibit the device from popping up the list button, so that the user cannot save or copy your image.
15. How to prohibit users from selecting text in iOS
We can prohibit iOS users from selecting text by specifying that the -webkit-user-select attribute of the text tag is none.
16. How to get the value of the scrollbar in iOS
In the desktop browser, you want to get the scrollbar value through and get it, but in iOS you will find that these two properties are undefined. Why? Because there is no concept of scroll bar in iOS, the scroll bar value can be obtained normally through these two attributes in Android. So how should we get the scroll bar value in iOS?
By and 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, and define a border for it, set its width to 100%. During the development of mobile devices, we usually define the text box as 100% width, and define it as a block-level element to achieve full-screen adaptive style. However, at this time, you will find that 1 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 to it -webkit-box-sizing:border-box; to specify the size of the box, including the width of the border.
18. How to solve the problem of rounded corners in Android 2.0 platforms
If you are careful enough, when developing wap site, you should find that there are many problems in platforms below Android 2.0, such as the problem of rounded corners.
When defining rounded corners for an element, for platforms that are fully compatible with Android 2.0 and below, we must follow the following techniques to define rounded corners of the border:
1＼-Webkit prefix must be added (in iOS, you can not add it, but in Android it must add it);
2＼If you define styles for borders, such as border:1px solid #000; then the -webkit-border-radius attribute must appear after the border attribute.
3＼If we have such visual elements, when the upper left and upper right corners are rounded corners, we must first define the global (rounded corner values of 4 corners)-webkit-border-radius:5px; then cover the lower left corner 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, remember! -Webkit prefix must be added!
19. How to solve the problem that pages cannot adapt to android platform
Although your html and css are completely adaptive, one day if you find that your page is not adaptive in Android, first please confirm whether 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 whether there is a value of width=device-width of this attribute. If not, please add it immediately!
20. How to solve the automatic recognition and automatic addition of 5-digit numbers on the page by safari in iOS 4.3 version
The new iOS system is version 4.3. After the upgrade, it caused a bug on safari: even if you add the following meta tag, safari will still automatically recognize the 5 consecutive numbers in the page and re-render it, which means that your css is invalid for the tag.
<meta name="format-detection" content="telphone=no" />
We can use a dirty way to solve it. For example, we have all rewrite the tags that display the amount in the Alipay wap site as follows:
<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!