Mobile Web Development FAQs
Problems
1. How to define font font-family on the mobile side
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
* Code to define fonts on the mobile side */
Body{font-family:helvetica;}
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, what is the retina display, brought about what problems
Retina: An ultra-high pixel density LCD screen, the same size of the screen display pixel points from 1 to multiple, such as on the same screen, the Apple device's Retina display, pixel points 1 into 4
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:
The picture cut out by the design is guaranteed to be an even number, and the image is reduced to the original 1/2 using Backgroud-size.
The sample width height is: 200px*200px, then the wording is as follows
. css{width:100px;height:100px;background-size:100px 100px;}
Other elements of the original value of 1/2, such as the visual version of the 40px font, using the style of writing 20px
. css{font-size:20px}
4. Viewport template
<! 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>
5. Use the latest version of IE and Chrome first
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
6. Title after adding to the home screen (IOS)
<meta name= "Apple-mobile-web-app-title" content= "title" >
7. 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"/>
8. 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"/>
10. 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.
11. 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"/>
Turn on phone function
<a href= "tel:123456" >123456</a>
To turn on the SMS feature:
<a href= "sms:123456" >123456</a>
12. 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>
13. 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)}
14, 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
15, Winphone system A, input tag is clicked when the translucent gray background how to remove
<meta name= "Msapplication-tap-highlight" content= "no" >
16. How to reset the default appearance of WebKit form elements
. Css{-webkit-appearance:none;}
17, WebKit form input box placeholder color value can change?
Input::-webkit-input-placeholder{color: #AAAAAA;}
Input:focus::-webkit-input-placeholder{color: #EEEEEE;}
18, WebKit form input box placeholder text can be changed line?
iOS Yes, Android no ~
19. Turn off the iOS keyboard automatically capitalize the first letter
In iOS, the keyboard is turned on by default, and if you enable this feature, you can:
<input type= "text" autocapitalize= "Off"/>
20. 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"/>
21. 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.
22. 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;
-webkit-appearance:none;
}
23. Events and styles for screen rotation
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{}
}
24.audio elements and video elements do not play automatically in iOS and Andriod
Solution: Touch screen is broadcast
$ (' HTML '). One (' Touchstart ', function () {
Audio.play ()
})
25. Shake and Shake function
HTML5 Devicemotion: The event of moving sensor data is encapsulated, which can get the motion acceleration of mobile phone.
26. 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/*" >
Usage Summary:
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
27. Eliminate Transition splash screen
. css{
-webkit-transform-style:preserve-3d;
-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
Remove the Voice input button on Android
Input::-webkit-input-speech-button {Display:none}
29. Analog button Hover effect
Mobile Touch button effect, can express the user some things are going to happen, is a better experience, but there is no mouse pointer on the mobile device, the use of CSS hover does not meet our needs, fortunately, there is a active CSS active effect, the code is as follows,
<! 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" >
<style type= "Text/css" >
A{-webkit-tap-highlight-color:rgba (0,0,0,0);}
. Btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color: #FFFFFF;}
. btn-blue:active{}
</style>
<body>
<div class= "Btn-blue" > Buttons </div>
<script type= "Text/javascript" >
Document.addeventlistener ("Touchstart", function () {}, True)
</script>
</body>
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
Part of this article comes from
Http://www.cnblogs.com/whyue/p/6813423.html
Mobile Web Development FAQs
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
