Mobile Side FAQs and Solutions
first, meta-basic knowledge
H5 page window automatically adjusts to device width and prevents users from zooming the page
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale= 1.0,user-scalable=no " />
Ignore numbers in a page as phone numbers
<meta name= "format-detection" content= "Telephone=no" />
- Ignore the recognition of email addresses in the Android platform
<meta name= "format-detection" content= "Email=no" />
- When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS safari
<!--the ios7.0 version, you can't see the effect on safari--
<meta name= "apple-mobile-web-app-capable" content= "yes" />
- Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style
<!--optional default, black, Black-translucent---
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" />
second, frequently asked questions
Mobile How to define font font-family, Chinese font use system default, English with Helvetica
Mobile font Unit font-size Select px or REM. For a device that only needs to be adapted to a mobile device, use the PX to fit a variety of mobile devices, and use REM, for example, with devices that differ considerably in resolution, such as iphone and ipad.
Mobile Touch Events (differentiate between WebKit and Winphone)
Touch events that are triggered when a user's finger is placed on the screen of a mobile device
The following support WebKit:
1. touchstart--occurs when the finger touches the screen. No matter how many fingers are present
2. touchmove--is triggered continuously 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
3. touchend--triggers when the finger leaves the screen
4, touchcancel--system stop tracking touch when it will trigger. For example, in the process of touching a sudden page alert () A prompt box, which will trigger the event, this event is less used
Mobile Click Screen generates 200-300 MS Latency response
Web pages on mobile devices are 300ms delayed, often causing button clicks or even clicks to fail.
Solution Solutions
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 the problem of 300ms latency, or you can speed up the response to events by binding Ontouchstart events.
The bitmap in the HD display is enlarged and the image becomes blurred?
Mobile-side visuals are typically twice times as large as traditional PCs.
The front-end solution is: The design manuscript cut out the image length and width guaranteed to be even, and use backgroud-size to reduce the image to the original 1/2;
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 value of the original 1/2, such as the visual version of the 40px font, the use of Style 20px:.css{font-size:20px}
How do I remove a translucent gray matte that is generated when an element is touched in an 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;)}
How do I remove a border when elements are clicked on some Android systems?
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
Refer to "How to remove the border from a label on Android"
1, Winphone system A, input tag is clicked when the translucent gray background of how to remove?
<meta name= "msapplication-tap-highlight" content= "no">
2. How to reset the default appearance of WebKit form elements?
. Css{-webkit-appearance:none;}
3, WebKit form input box placeholder color value can change?
input::-webkit-input-placeholder{color: #AAAAAA;}
input:focus::-webkit-input-placeholder{color: #EEEEEE;}
4, WebKit form input box placeholder text can be changed line?
iOS Yes, Android no ~
IE10 (Winphone8) How does the default appearance of form elements reset?
1. Disable the Select Default drop-down arrow
::-ms-expand applies to the form selection control drop-down arrow's modification, has multiple property values, sets it to hide (Display:none) and uses the background image to decorate to get the effect we want.
Select::-ms-expand {display: none;}
2. Disable radio and checkbox default styles
::-ms-check applies to the form check box or the radio button default icon modification, also has multiple property values, set it to hide (Display:none) and use the background image to decorate to get the effect we want.
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
3. Disable the default purge button for PC-side form input box
When the form text entry box is entered, a text Clear button is displayed:-ms-clear applies to the Erase button's modification, the same setting makes it hidden (Display:none) and uses the background image to decorate to get the effect we want.
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
4, prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures
. Css{-webkit-touch-callout:none}
5. Disable the selection of text for iOS and Android users
. Css{-webkit-user-select:none}
Refer to "How to change the appearance of form elements (for Webkit and IE10)"
How do I make a call and send a text message?
1. Call
<a href= "tel:0755-10086"> call: 0755-10086</a>
2. Send SMS
Winphone System is invalid
<a href= "sms:10086"> texting: 10086</a>
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:
<div class= "Btn-blue"> buttons </div>
<script type= "Text/javascript" >
Document.addeventlistener ("Touchstart", function() {}, true)
</script>
Compatibility ios5+, part Android 4+, Winphone 8
To achieve a fully compatible approach, you can control the class name of the button by binding Ontouchstart and Ontouchend
<div class= "Btn-blue"> buttons </div>
<script type= "Text/javascript" >
Varbtnblue = Document.queryselector (". Btn-blue");
Btnblue.ontouchstart = function() {
this. ClassName = "Btn-blue btn-blue-on"
}
Btnblue.ontouchend = function() {
this. ClassName = "Btn-blue"
}
</script>
Events and styles for screen rotation
1. Events
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;
}
}
2. Style
/* style used when vertical screen */
@media all and (orientation:portrait) {. css{}}
/* style used on horizontal screen */
@media all and (Orientation:landscape) {
. css{}
}
Audio elements and video elements do not play automatically in iOS and Andriod
Solution: Touch screen is broadcast
$ (' HTML '). One (' Touchstart ',function() {
Audio.play ()
})
You can refer to the audio element that cannot be played automatically
Shake a shake function
HTML5 Devicemotion: The event of moving sensor data is encapsulated, which can get the motion acceleration of mobile phone.
Mobile photos and uploading 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 photo, video, select Local image function, some Android only select local image function, Winphone not support
Browser users adjust the font size after the page dwarfish, how to prevent user adjustment?
Reason
Anroid was a layoutinflater, and the TextView was treated uniformly.
iOS modifies the Body.style.webkitTextSizeAdjust value
General solution: Android temporarily no program
iOS uses-webkit-text-size-adjust to disable font resizing
Body{-webkit-text-size-adjust:100%!important;}
The best solution: use REM or Percent layout for the entire page
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 flicker, and ensure smooth animation
. css {
-webkit-transform:translate3d (0, 0, 0);
-moz-transform:translate3d (0, 0, 0);
-ms-transform:translate3d (0, 0, 0);
Transform:translate3d (0, 0, 0);
}
Refer to "Using CSS to turn on hardware acceleration to improve website performance"
Cancel input under iOS, enter the default capitalization of the English initials
<input autocapitalize= "Off" autocorrect= "off"/>
Remove the Voice input button on Android
Input::-webkit-input-speech-button {Display:none}
Android 2.3 Bug
@-webkit-keyframes need to end with 0% start 100%, 0% percent can not be removed
After and before pseudo-classes cannot use animations
Border-radius does not support% units
Translate percent notation and scale together can result in invalidation, such as-webkit-transform:translate ( -50%,-50%) scale (-0.5, 1)
Android 4.x Bug
Samsung Galaxy S4 does not support Border-radius abbreviations in its own browser
When setting Border-radius and background colors at the same time, the background color overflows beyond the rounded corners
Some phones (such as Samsung), a link support mouse: Visited event, that is, the text becomes purple after link access
Refer to the injury of Border-radius movement
Several elements of designing high-performance CSS3 animations
Use composition attributes transform and opacity as much as possible to design CSS3 animations without using the position left and top to locate
Using Translate3d to turn on GPU acceleration
Refer to "High performance animations"
Fixed bug
Fixed element easy to locate error under iOS, soft keyboard popup, affect fixed element positioning
Android under fixed performance is better than iOS, when the soft keyboard pops up, does not affect the fixed element positioning
Position:fixed not supported under iOS9
Solution: Available isroll.js, no perfect solution
Reference
"Mobile Web page Use position:fixed problem summary"
"Using Iscroll.js to solve the problem of not supporting position:fixed under iOS4"
How to block the default touch events for Windows Phone
Winphone The default Touch event event using E.preventdefault is not valid
The current workaround is to use styles to disable
Html{-ms-touch-action:none;} /* Disable Winphone Default Touch event */
Reference: "Windows phone 8 Touch Support"
Commonly used mobile End frames
Zepto.js
The syntax is almost the same as jquery, and will jquery basic zepto~, official website: http://zeptojs.com/
Chinese (non-official): http://www.css88.com/doc/zeptojs_api/
Frequently used extension modules:
Browser detection: Https://github.com/madrobby/zepto/blob/master/src/detect.js
Tap Event: Https://github.com/madrobby/zepto/blob/master/src/touch.js
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 ~,
Official website: http://cubiq.org/iscroll-5
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
Mobile Side FAQs and Solutions