Web App Development Tips Summary

First, Meta/link Related:

1, Baidu prohibit transcoding

Baidu Mobile phone to open the page, Baidu may be on your page transcoding, to your page affixed to its ads, very disgusting. But we can use this META tag to disable it:

<meta http-equiv= "Cache-control" content= "No-siteapp"/>

Related link: Siteapp transcoding declaration

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

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

3. Enable WEBAPP Full screen mode (IOS)

When the site is added to the home screen and then clicked to start, you can hide the address bar (jumping from the browser or entering the 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 I use 5S test, set "Apple-touch-fullscreen" and no egg use, hope that the understanding of the bottom of the comments to inform

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

Sets 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 parameters:

Default: The status bar background is white.
Black: The status bar background is dark.
Black-translucent: The status bar background is translucent. If set to default or black, the page content starts at the bottom of the status bar. If set to Black-translucent, the page content fills the entire screen, and the top is obscured by the status bar.
6. Mobile phone number recognition (IOS)

In IOS Safari (no other browsers and Android), the numbers that look like phone numbers are treated as phone links, such as:

7 digits, shaped like: 1234567
Numbers with brackets and plus signs, shaped like: (+86) 123456789
Number of double connection lines, shaped like: 00-00-00111
11 digits, shaped like: 13800138000
There may be other types of numbers that are also identified. We can turn off auto-recognition of phone numbers by following meta:

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

But at some point, when you turn off automatic recognition, and you want some phone numbers to be able to link to the IPhone's dial-up and SMS features on time, you can do this using the following method:

(2) Turn on the phone function:

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

(3) Turn on SMS function:

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

7. Mobile-side mailbox Recognition (Android)

As with the identification of the phone number, the string that conforms to the mailbox format is recognized on Android, and we can automatically identify the mailbox by using the following meta:

<meta content= "Email=no" name= "Format-detection"/>

Similarly, we can also use the Tag property to turn on the long-by-email address pop-up message sending function:

<a Mailto:[email protected] ">[email protected]</a>

8. Add Smart App ad 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 Launch animation

Since the ipad splash screen does not include the status bar area. So the start picture needs to subtract the 20px size in the direction corresponding to the status bar area, minus the 40px size on the retina device accordingly

<!--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. Add the app icon after the main screen

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

<!--design Artwork--
<link href= "Short_cut_114x114.png" rel= "apple-touch-icon-precomposed" >
<!--add highlight effects-
<link href= "Short_cut_114x114.png" rel= "Apple-touch-icon" >
Apple-touch-icon: IOS6 and below will automatically add a layer of highlight to the icon (IOS7 has started using a flat design style)
Apple-touch-icon-precomposed: Using the design original icon
Effect:

Icon Size:

You can provide different icons for different devices by specifying the Size property (but generally, we only need to provide an icon of x-pixels size)

The official statement 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 is required:

x pixels

x pixels (High resolution)

For IPad, both of these sizes is required:

x pixels

144 x 144 (high resolution)

11, priority to use the latest version of IE and Chrome

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>

Second, html/css

1. Turn off auto-capitalization of iOS keyboard first letter

In iOS, the keyboard is turned on by default, and if you enable this feature, you can:

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

2. Turn off iOS input auto-correction

and English input default auto-capitalization, iOS also does a function, the default input method will turn on the automatic correction input, so that users often have to operate two times. If you do not want to turn this feature on, we can turn it off by using the input Tag property:

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

3. Prohibit text scaling

The size of the text is recalculated when the mobile device is switched between the screen and the other, and is scaled accordingly, and when we don't need this, we can choose to disallow:

HTML {
-webkit-text-size-adjust:100%;
}
It is important to note that this property has been removed from the PC side and that the property must be set to ' meta viewport ' in order to be active on the mobile side.

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

On iOS, the input box defaults to an inner shadow, but cannot be cleared using Box-shadow, which can be turned off if no shadow is needed:

Input
TEXTAREA {
border:0; /* Method 1 */
-webkit-appearance:none; /* Method 2 */
}
5. Fast Rebound scrolling

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

In the early days, the mobile browser does not support the non-body elements of the scroll bar, so generally with the help of Iscroll;
Android 3.0/ios solves the scrolling problem of non-body elements, but the scroll bar is not visible, and iOS can only scroll with 2 fingers;
Android 4.0 solved the scroll bar is not visible and added a quick rebound scrolling effect, but then this feature was removed;
iOS has been resolved since 5.0 the scroll bar is not visible and adds a quick rebound scrolling effect
On iOS If you want an element to have a scrolling effect like Native, you can do this:

. xxx {
Overflow:auto; /* Auto | Scroll * *
-webkit-overflow-scrolling:touch;
}
Ps:iscroll used to feel not very good, there are some strange bugs, here is recommended another Idangero Swiper, this plug-in integrates the powerful function of sliding screen scrolling (support 3D), but also has a rebound scrolling built-in scroll bar, the official address:

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

6. Disable selection on the mobile side

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

. user-select-none {
-webkit-user-select:none; /* Chrome All/safari all */
-moz-user-select:none; /* Firefox All (not required on mobile) */
-ms-user-select:none; /* IE + + *
}
7. Remove touch highlighting from the mobile side

When you do the mobile page, you will find all a tags in the trigger click or all set Pseudo-class: Active elements, the default will be in the activation state, the display of the Highlight box, if you do not want this highlight, then you can use CSS following methods to do global suppression:

HTML {
-webkit-tap-highlight-color:rgba (0, 0, 0, 0);
}
However, this method is not valid on Samsung's machine, there is a compromise method is to replace the page non-real jump link a tag to other tags, can solve the problem.

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

Usually when you press and hold the image img on your phone or pad, the option to store the image or copy the image will pop up, and if you don't want the user to do so, you can disable it in the following ways:

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

Resources:

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

Web App Development Tips Summary