Summary of Web App Development Skills

1. META/LINK related:

1. Baidu prohibits transcoding

When you open a web page through Baidu Mobile, Baidu may transcode your web page and paste its ads on your page, which is very disgusting. However, we can prohibit it through this meta tag:

 <meta http-equiv= "Cache-Control" content= "no-siteapp" />

Related link: SiteApp Transcoding Statement

2. Title after adding to the home screen (IOS)

 <meta name= "apple-mobile-web-app-title" content= "title" >

3. Enable WebApp full screen mode (IOS)

When you add a website to the home screen and then click to launch it, you can hide the address bar (jumping from the browser or entering a link does not have this effect)

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

PS: However, after testing with my 5S, I found that setting "apple-touch-fullscreen" is useless. I hope those who know more can let me know in the comments below.

4. Set the background color of the status bar (IOS)

Set the background color of the status bar. This is only effective when "apple-mobile-web-app-capable" content="yes"

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content parameter:

default: The status bar background is white.
black : The status bar background is black.
black-translucent: The status bar background is semi-transparent. If set to default or black, the web page content starts from the bottom of the status bar. If set to black-translucent, the web page content fills the entire screen and the top is blocked by the status bar.
6. Mobile phone number recognition (IOS)

On iOS Safari (but not other browsers or Android), numbers that look like phone numbers are treated as phone links, such as:

7 digits, such as: 1234567
Numbers with brackets and plus signs, such as: (+86)123456789
The numbers of the double connection lines are like: 00-00-00111
11 digits, such as: 13800138000
There may be other types of numbers that are also recognized. We can turn off automatic recognition of phone numbers through the following meta:

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

But sometimes, after you turn off automatic phone recognition, you still want to connect to the iPhone's dialing and text messaging functions when you long press certain phone numbers. You can use the following method to achieve this:

(2) Enable the phone function:

 <a href= "tel:123456" > 123456 </a>

(3) Enable SMS function:

 <a href= "sms:123456" > 123456 </a>

7. Mobile mailbox recognition (Android)

Just like phone number recognition, Android will recognize strings that match the email format. We can use the following meta to manage automatic email recognition:

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

Similarly, we can also use the tag attributes to enable the function of long pressing the email address to pop up the email sending function:

 <a mailto:dooyoe @gmail .com"> dooyoe @gmail .com</a>

8. Add Smart App Banner (iOS 6+ Safari)

 <meta name= "apple-itunes-app" content= "app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" >

9. iOS Web app startup animation

Since the iPad startup screen does not include the status bar area, the startup image needs to subtract 20px in the direction corresponding to the status bar area, and correspondingly 40px on retina devices.

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
(landscape: horizontal screen | portrait: vertical screen)
10. APP icon after adding to the home screen

There are two slightly different ways to specify the path to the web app icon after it is added to the home screen:

 <!-- Original design -->
 <link href= "short_cut_114x114.png" rel= "apple-touch-icon-precomposed" >
 <!-- Add highlight effect -->
 <link href= "short_cut_114x114.png" rel= "apple-touch-icon" >
 apple-touch-icon: In iOS 6 and below, a highlight effect will be automatically added to the icon (a flat design style has been used since iOS 7)
 apple-touch-icon-precomposed: Use "design original icon"

Effect:

Icon size:

You can specify the size attribute to provide different icons for different devices (but generally, we only need to provide an icon of 114 x 114 pixels)

The official description is as follows

Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

57 x 57 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

11. Give priority to using the latest versions of IE and Chrome

 <meta http-equiv= "X-UA-Compatible" content= "IE=edge,chrome=1" />

2. HTML/CSS

1. Turn off the automatic capitalization of the first letter on the iOS keyboard

In iOS, the keyboard has the capitalization feature enabled by default. If you enable this feature, you can do this:

 <input type= "text" autocapitalize= "off" />

2. Turn off iOS input auto-correction

Just like the default automatic capitalization of the first letter of English input, IOS also has a feature that the default input method will enable automatic correction of input content. In this case, users often have to operate twice. If you do not want to enable this feature, you can turn it off through the input tag attributes:

<input type="text" autocorrect="off" />

3. Disable text scaling

When the mobile device switches between landscape and portrait modes, the text size will be recalculated and scaled accordingly. If we don't need this, we can choose to disable it:

 html {
 -webkit-text-size-adjust: 100 %;
 }

It should be noted that this attribute on the PC side has been removed. For this attribute to take effect on the mobile side, `meta viewport' must be set.

4. How to clear the shadow in the input box on mobile devices

On iOS, input boxes have an inner shadow by default, but you can’t use box-shadow to clear it. If you don’t need a shadow, you can turn it off like this:

 input,
 textarea {
 border: 0 ; /* Method 1 */  
 -webkit-appearance: none; /* Method 2 */  
 }

5. Fast rebound scrolling

Let's first look at the history of rebound scrolling in mobile browsers:

In the early days, mobile browsers did not support scroll bars for non-body elements, so iScroll was generally used;
Android 3.0/iOS solves the scrolling problem of non-body elements, but the scroll bar is not visible, and scrolling can only be done with two fingers on iOS;
Android 4.0 solved the problem of invisible scroll bars and added a fast rebound scrolling effect, but this feature was later removed;
iOS 5.0 has solved the problem of invisible scroll bars and added a fast rebound scrolling effect. If you want an element to have a Native scrolling effect on iOS, you can do this:

 .xxx {
 overflow: auto; /* auto | scroll */  
 -webkit-overflow-scrolling: touch;
 }

PS: I don’t think iScroll is very good after using it. There are some weird bugs. Here I recommend another plugin, iDangero Swiper. This plugin integrates the powerful function of sliding screen scrolling (supports 3D), and also has a built-in scroll bar for rebound scrolling. Official address:

http://www.idangero.us/sliders/swiper/index.php

6. Selected content is prohibited on mobile devices

If you don't want users to be able to select content on the page, you can disable it in CSS:

 .user-select-none {
 -webkit-user-select: none; /* Chrome all / Safari all */  
 -moz-user-select: none; /* Firefox all (not needed for mobile devices) */  
 -ms-user-select: none; /* IE 10+ */  
 }

7. Cancel the touch highlight effect on the mobile terminal

When making mobile pages, you will find that all a tags will display a highlight box by default when they are activated when they are triggered by a click or all elements with the pseudo-class: active. If you do not want this highlight, you can use the following CSS method to globally prohibit it:

 html {
 -webkit-tap-highlight-color: rgba( 0 , 0 , 0 , 0 );
 }

But this method is not effective on Samsung phones. A compromise method is to replace the a tag of the non-real jump link on the page with other tags to solve this problem.

8. How to prohibit saving or copying images (IOS)

Usually when you long press the image img on a phone or pad, an option to save the image or copy the image will pop up. If you don't want the user to do this, you can disable it by:

 img { -webkit-touch-callout: none; }