Summary of Web APP development skills and webapp development skills

Summary of Web APP development skills and webapp development skills

I. META/LINK related:

1. Baidu prohibits transcoding.

When you open a webpage through a Baidu mobile phone, Baidu may transcode Your webpage and post its advertisement to Your webpage, which is very disgusting. However, we can disable this meta tag:

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

Link: SiteApp transcoding statement

2. Title added to the home screen (IOS)

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

3. Enable WebApp full screen mode (IOS)

When the website is added to the background of the home screen and then clicked to start, the address bar can be hidden (jump from the browser or enter a link to enter does not work)

<Meta name = "apple-mobile-web-app-capable" content = "yes"/>

<Meta name = "apple-touch-fullscreen" content = "yes"/>

PS: However, after I use the 5S test, setting "apple-touch-fullscreen" is useless. I hope the interpreter can make a comment at the bottom.

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

Set the background color of the status bar, which takes effect only when "apple-mobile-web-app-capable" content = "yes"

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

Content parameter:

Default: the background of the status bar is white.
Black: the background of the status bar is black.
Black-translucent: the background of the status bar is translucent. If it is set to default or black, the webpage content starts from the bottom of the status bar. If it is set to black-translucent, the webpage content is full of the whole screen, and the top is blocked by the status bar.
6. Mobile phone number recognition (IOS)

On iOS Safari (neither other browsers nor Android), numbers that look like phone numbers are processed as phone links, for example:

Seven digits, such as: 1234567
A number with parentheses and a plus sign, for example: (+ 86) 123456789
A number in the double connection line, for example, 00-00-00111.
11 digits, such as: 13800138000
Other types of numbers may also be identified. We can use the following meta to disable automatic identification of phone numbers:

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

However, in some cases, after you turn off automatic phone identification, you may want some phone numbers to be linked to the dialing and text message functions of the iPhone on time. You can use the following methods to achieve this:

(2) Enable the telephone function:

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

(3) Enable the SMS function:

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

7. Mobile Terminal email recognition (Android)

Like the identification of phone numbers, Android will recognize strings that conform to the mailbox format. We can use the following meta to identify emails automatically:

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

Similarly, you can use the label attribute to enable the long-press email address pop-up email sending function:

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

8. Add Smart App advertisement bar 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

The boot screen of the iPad does not include the status bar area. Therefore, the size of 20px in the direction corresponding to the status bar area must be subtracted from the size of 40px on the retina device.

<! -- 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: landscape screen | portrait: landscape screen)
10. APP icon added to the home screen

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

<! -- Design the source image -->
<Link href = "short_cut_114x114.png" rel = "apple-touch-icon-precomposed">
<! -- Add a highlight -->
<Link href = "short_cut_114x114.png" rel = "apple-touch-icon">
Apple-touch-icon: In IOS6 and earlier versions, a highlight is automatically added to the icon (IOS7 begins to use a flat design style)
Apple-touch-icon-precomposed: Use "design source image icon"
Effect:

 

Icon size:

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

Official Instructions are 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:

57x57 pixels

114x114 pixels (high resolution)

For iPad, both of these sizes are required:

72x72 pixels

144x144 (high resolution)

11. The latest version of IE and Chrome is preferred.

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

Ii. HTML/CSS

1. Disable Automatic uppercase of the first letter of the iOS keyboard.

In iOS, the upper-case letter function is enabled on the keyboard by default. If this function is enabled, you can:

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

2. Disable iOS input for automatic correction.

IOS also provides a function that uses uppercase letters for English input by default. The default input method enables automatic correction of input content. In this way, you need to perform the operation twice. If you do not want to enable this function, you can disable it using the input tag attribute:

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

3. Disable text Scaling

When the mobile device switches between the portrait and landscape screens, the text size is recalculated and scaled accordingly. If this is not required, you can choose to disable it:

Html {
-Webkit-text-size-adjust: 100%;
}
Note that this attribute has been removed from the PC end. to take effect on the Mobile End, you must set 'meta viewport '.

4. How to clear the shadow in the input box on the Mobile Terminal

On iOS, the input box has an internal shadow by default, but it cannot be cleared using box-shadow. If you do not need a shadow, you can disable it as follows:

Input,
Textarea {
Border: 0;/* method 1 */
-Webkit-appearance: none;/* method 2 */
}
5. Fast rebound and rolling

Let's take a look at the history of the development of mobile browser with rebound:

In the early days, mobile browsers did not support scroll bars of non-body elements, so iScroll was generally used;
Android 3.0/iOS solves the non-body element scrolling problem, but the scroll bar is invisible. At the same time, iOS can only scroll with two fingers;
Android 4.0 solves the problem that the scroll bar is invisible and increases the effect of rapid rebound and scrolling. However, this feature is removed later;
Starting from 5.0, iOS solved the problem that the scroll bar is invisible and added a rapid rebound and scroll effect.
On iOS, if you want an element to have a rolling effect like Native, you can do this:

. Xxx {
Overflow: auto;/* auto | scroll */
-Webkit-overflow-scrolling: touch;
}
PS: After iScroll is used, it does not feel very good. There are some strange bugs. Here we recommend another iDangero Swiper. This plug-in integrates the powerful function of Sliding Screen scrolling (supporting 3D ), there is also a built-in scroll bar for rebound and scrolling. Official Address:

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

6. Prohibit selected content on the Mobile End

If you do not want users to select the 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 required for mobile terminals )*/
-Ms-user-select: none;/* IE 10 + */
}
7. Remove touch highlight on mobile devices

When you create a mobile page, you will find that all a tags are highlighted when a click is triggered or all elements with a pseudo class: active are set, if you do not want this highlight, you can use css to globally disable it:

Html {
-Webkit-tap-highlight-color: rgba (0, 0, 0, 0 );
}
However, this method is ineffective on Samsung's machine. One compromise is to replace the tag of the non-real jump link on the page with other tags, which can solve this problem.

8. How to disable image storage or copying (IOS)

Generally, when you press the image img on your phone or pad, an option will pop up to store the image or copy the image. If you do not want the user to do this, you can disable it by the following methods:

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

References:

Http://www.cnblogs.com/PeunZhang/p/3407453.html#question_1