Since the release of the two impressive mobile operating systems, iPhone and Android, a new term has emerged in the Internet world - WebApp (meaning a WEB-based application running on high-end mobile devices).
Developers all know that there are two types of applications in high-end smartphone systems: one is a native (operating system-based) APP; the other is a WebApp that runs in the browser of high-end phones. This article will focus on the latter.
I. META/LINK Related:
1. Disable Baidu transcoding
When opening a webpage via Baidu Mobile, Baidu may transcode your webpage and paste its ads onto your page, which is really disgusting. However, we can use this meta tag to disable it:
<meta http-equiv="Cache-Control" content="no-siteapp" />
Related links:SiteApp Transcoding Statement
2. Title after adding to home screen (iOS)
<meta name="apple-mobile-web-app-title" content="标题">
3. Enable WebApp fullscreen mode (iOS)
When the website is added to the home screen and then tapped to launch, the address bar can be hidden (this effect does not occur when entering via a browser redirect or by typing a link).
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
PS: However, after testing with my own iPhone 5S, setting "apple-touch-fullscreen" is useless. If you know why, please let us know in the comments at the bottom.
4. Set the background color of the status bar (iOS)
Setting the status bar background color only takes effect when "apple-mobile-web-app-capable" content="yes" is set.
<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 black.
- black-translucent: The status bar background is semi-transparent. If set to default or black, the webpage content starts from the bottom of the status bar. If set to black-translucent, the webpage content fills the entire screen, and the top will be obscured by the status bar.
6. Mobile phone number recognition on mobile (iOS)
On iOS Safari (other browsers and Android do not), numbers that look like phone numbers are turned into phone links, for example:
- 7-digit numbers, such as: 1234567
- Numbers with parentheses and plus signs, such as: (+86)123456789
- Numbers with double hyphens, such as: 00-00-00111
- 11-digit numbers, such as: 13800138000
There may be other types of numbers that are also recognized. We can turn off automatic phone number recognition with the following meta:
<meta name="format-detection" content="telephone=no" />
But sometimes, after turning off automatic phone number recognition, you may want certain phone numbers to link to iPhone's dialing and SMS functions when long-pressed. You can use the following methods:
(2) Enable phone call function:
<a href=”tel:123456″>123456</a>
(3) Enable SMS function:
<a href=”sms:123456″>123456</a>
7. Email recognition on mobile (Android)
Same as phone number recognition, on Android, strings that match email format are recognized. We can use the following meta to disable automatic email recognition:
<meta content=”email=no” name=”format-detection” />
Similarly, we can also use tag attributes to enable the function of long-pressing an email address to pop up the email sending option:
<a mailto:[email protected]">[email protected]</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 launch animation
Since the iPad launch screen does not include the status bar area, the launch image needs to subtract the direction corresponding to the status bar area.20pxsize; accordingly, on Retina devices, subtract40pxthe size.
<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png.html" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png.html" 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.html" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png.html" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png.html" 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.html" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
（landscape：横屏 | portrait：竖屏）
10. APP icon after adding to home screen
Specify the icon path for a web app after it is added to the home screen. There are two slightly different ways:
<!-- 设计原图 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon">
- apple-touch-icon: On iOS 6 and earlier, a highlight effect is automatically added to the icon (starting with iOS 7, a flat design style is used).
- apple-touch-icon-precomposed：Use the "original designed 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).
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:
- 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. Prefer the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
II. HTML/CSS
1. Turn off automatic capitalization of the first letter in the iOS keyboard
In iOS, by default the keyboard has automatic capitalization enabled. If you do not want to enable this feature, you can do the following:
<input type="text" autocapitalize="off" />
2. Turn off iOS input auto-correction
Similar to the default automatic capitalization for English input, iOS also has a feature where the default input method enables auto-correction of input content. This often requires users to operate twice. If you don't want this feature enabled, we can turn it off via the input tag attribute:
<input type="text" autocorrect="off" />
3. Disable text scaling
When a mobile device switches between landscape and portrait orientations, the text size is recalculated and scaled accordingly. When we don't need this, we can choose to disable it:
html {
-webkit-text-size-adjust: 100%;
}
Note that this property has been removed on the PC side. For this property to take effect on mobile, the `meta viewport` must be set.
4. How to remove the inner shadow from input fields on mobile
On iOS, input fields have an inner shadow by default, but it cannot be removed with box-shadow. If you don't need the shadow, you can turn it off like this:
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5. Fast momentum scrolling
Let's first look at the history of momentum scrolling in mobile browsers:
- In the early days, mobile browsers did not support scrollbars on non-body elements, so iScroll was generally used.
- Android 3.0/iOS solved the scrolling problem for non-body elements, but the scrollbar was invisible, and on iOS scrolling could only be done with two fingers.
- Android 4.0 solved the invisible scrollbar issue and added fast momentum scrolling, but this feature was later removed.
- Starting with iOS 5.0, the invisible scrollbar issue was solved and fast momentum scrolling was added.
On iOS, if you want an element to have a native-like scrolling effect, you can do this:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS: After using iScroll, I feel it's not very good and has some weird bugs. Here I recommend another one, iDangero Swiper. This plugin integrates powerful sliding/scrolling features (supports 3D), and also has a built-in scrollbar with momentum scrolling. Official address:
http://www.idangero.us/sliders/swiper/index.php
6. Disable content selection on mobile
If you don't want users 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 （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
7. Remove the touch highlight effect on mobile
When working on mobile pages, you'll notice that all a tags when triggered by a click, or all elements with the pseudo-class :active, will by default show a highlight box in the active state. If you don't want this highlight, you can globally disable it with the following CSS method:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
But this method doesn't work on Samsung devices. A compromise is to replace a tags that are not real navigation links with other tags, which can solve this problem.
8. How to disable saving or copying images (iOS)
Usually when you long-press an image (img) on a phone or pad, options to "Store Image" or "Copy Image" pop up. If you don't want users to do this, you can disable it with the following methods:
img { -webkit-touch-callout: none; }
Source: http://www.cnblogs.com/WhiteCusp/p/4502961.html