meta-related
1. Title after adding to the home screen (IOS)
<meta name= "Apple-mobile-web-app-title" content= "title" >
2. Enable WEBAPP Full screen mode (IOS)
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "Apple-touch-fullscreen" content= "yes"/>
3. Baidu prohibits 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"/>
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"/>
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.
5. 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"/>
6. Turn on SMS: <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. Use the latest version of IE and Chrome first
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
9.viewport templates
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" 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" >
<meta content= "Email=no" name= "Format-detection" >
<title> title </title>
<link rel= "stylesheet" href= "Index.css" >
<body>
Start content here
</body>
Font of the three major mobile phone systems:
iOS system
The default Chinese font is Heiti SC
The default English font is Helvetica
The default digital font is Helveticaneue
No Microsoft Ya-Black font
Android system
The default Chinese font is Droidsansfallback
The default English and digital fonts are droid Sans
No Microsoft Ya-Black font
Winphone system
Default Chinese font is Dengxian (founder and other line body)
The default English and digital fonts are Segoe
No Microsoft Ya-Black font
each phone system has its own default font, and does not support Microsoft Black
no need to define Chinese font for mobile phone without special requirement, use system default
English fonts and digital fonts can be used Helvetica, three kinds of systems are supported
2, Mobile font unit font-size Select px or REM
For devices that only need to be adapted to a mobile device, use the PX
For devices that need to be adapted to a variety of mobile devices, use REM, such as a device that only needs to be adapted to different resolutions, such as iphone and ipad.
REM Configuration reference:
HTML {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
HTML {
font-size:15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
HTML {
font-size:20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
HTML {
font-size:22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
HTML {
font-size:23.5px
}
}
@media screen and (min-width:800px) and (max-width:959px) {
HTML {
font-size:25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
HTML {
font-size:30px
}
}
@media screen and (min-width:1080px) {
HTML {
font-size:32px
}
}
3. Mobile Touch Event (differentiate between WebKit and Winphone)
Touch events that trigger when a user's finger is placed on a mobile device that slides on the screen
The following support WebKit
touchstart--occurs when the finger touches the screen. No matter how many fingers are present
touchmove--a continuous trigger when the finger is sliding on the screen. Usually we slide the page again, and the Preventdefault () that invokes the event can prevent the default from happening: Prevent page scrolling
touchend--triggered when the finger leaves the screen
The touchcancel--system stops tracking when the touch is triggered. For example, in the process of touching a sudden page alert () A prompt box, which will trigger the event, this event is less used
The following support Winphone 8
mspointerdown--occurs when the finger touches the screen. No matter how many fingers are present
mspointermove--a continuous trigger when the finger is sliding on the screen. Usually we slide the screen again, will call the CSS Html{-ms-touch-action:none;} You can prevent the default from happening: Prevent page scrolling
mspointerup--triggered when the finger leaves the screen
4. Mobile Click Screen generates 200-300 MS delay response
Web pages on mobile devices are 300ms delayed, and playing can cause button click Delay or even click Invalidation.
Resolve Latency Scenarios:
Fastclick can resolve 300ms latency of click events on the phone
Zepto's Touch module, the Tap event is also designed to address latency issues in the Click
Response Order of touch events
1, Ontouchstart
2, Ontouchmove
3, Ontouchend
4. onclick
solve problems with 300ms latency, or you can speed up response to events by binding Ontouchstart events
when the bitmap in the HD display is magnified, the image becomes blurred, so the visual artwork on the mobile side is typically twice times the size of a traditional PC
The front-end response, then, is:
Design Manuscript cut out of the image length is guaranteed to be even, and use backgroud-size to reduce the image to the original
other elements of the original value of 1/2, such as the visual version of the 40px font, using the style of writing 20px
6. How to remove the translucent gray matte that is generated when the element is touched in the iOS system
iOS users click on a link, a translucent gray matte appears, if you want to disable, you can set the alpha value of-webkit-tap-highlight-color to 0, that is, the last digit of the property value is set to 0 to remove the translucent gray matte
A,button,input,textarea{-webkit-tap-highlight-color:rgba (0,0,0,0)}
7, some of the Android system elements are clicked to create a border how to remove
Android users click on a link, there will be a border or translucent gray matte, different manufacturers defined the amount of the effect is not the same, you can set the alpha value of-webkit-tap-highlight-color 0 to remove some of the machine's own effect
a,button,input,textarea{
-webkit-tap-highlight-color:rgba (0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify has a side effect, is that the input method can no longer enter multiple characters
In addition, some models can not be removed, such as Millet 2
For the button class there is another way, do not use a or input tags, directly with the DIV tag
8, Winphone system A, input tag is clicked when the translucent gray background how to remove
<meta name= "Msapplication-tap-highlight" content= "no" >
9. How to reset the default appearance of WebKit form elements
. Css{-webkit-appearance:none;}
10, WebKit form input box placeholder color value can change?
Input::-webkit-input-placeholder{color: #AAAAAA;}
Input:focus::-webkit-input-placeholder{color: #EEEEEE;}
11, WebKit form input box placeholder text can be changed line?
iOS Yes, Android no ~
14. Suppress 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.
15. How the mobile side clears the shadow in the input box
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 */
}
17. 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 + + *
}
18. 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.
21. Events and styles for screen rotation
Event
Window.orientation, value: Plus or minus 90 indicates that the horizontal screen mode, 0 and 180 are displayed as vertical screen mode;
Window.onorientationchange = function () {
Switch (window.orientation) {
CASE-90:
Case 90:
Alert ("Horizontal screen:" + window.orientation);
Case 0:
Case 180:
Alert ("Vertical screen:" + window.orientation);
Break
}
}
Style
Style used when vertical screen
@media all and (orientation:portrait) {
. css{}
}
Styles used when traversing a screen
@media all and (Orientation:landscape) {
. css{}
}
22.audio elements and video elements do not play automatically in iOS and Andriod
Solution: Touch screen is broadcast
$ (' HTML '). One (' Touchstart ', function () {
Audio.play ()
})
24. Mobile photos and upload pictures
<input type= "File" > 's Accept Property
<!--Select Photos--
<input type=file accept= "image/*" >
<!--Select Video--
<input type=file accept= "video/*" >
iOS has photos, videos, and local image selection features
Some Android only choose local picture function
Winphone not supported
The input control looks ugly by default
25. Eliminate Transition splash screen
. css{
/* Set how inline elements are rendered in 3D space: Reserved 3d*/
-webkit-transform-style:preserve-3d;
/* (sets whether the reverse side of the element being converted is visible when facing the user: hidden) */
-webkit-backface-visibility:hidden;
}
Turn on hardware acceleration
Resolve page Flash White
Keep your animations flowing
. css {
-webkit-transform:translate3d (0, 0, 0);
-moz-transform:translate3d (0, 0, 0);
-ms-transform:translate3d (0, 0, 0);
Transform:translate3d (0, 0, 0);
}
Several elements of designing high-performance CSS3 animations
use synthetic attributes transform and opacity as much as possible to design CSS3 animations,
Use position left and top to locate
Using Translate3d to turn on GPU acceleration
Framework
1. Mobile-based framework
Zepto.js syntax is almost the same as jquery, and jquery will basically zepto~
Iscroll.js solve the page does not support elastic scrolling, does not support fixed problems ~ To achieve pull-down refresh, slide screen, zoom and other functions ~
Underscore.js The library provides a full set of functional programming functions, but does not extend any JavaScript built-in objects.
Fastclick speed up Mobile-click Response time
Animate.css CSS3 Animation Effect Gallery
Normalize.css Normalize.css is a modern, CSS reset for HTML5 ready for a premium alternative
2. Sliding screen Frame
Suitable for sliding screen on the slide screen, left and right slide screen to switch page effect
Slip.js
Islider.js
Fullpage.js
Swiper
3. Waterfall Flow Framework
Masonry
Tools recommended
Caniuse each browser supports HTML5 property query
Paletton Color Matching
Some tips about the app
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
