Some common compatibility issues on the mobile side

First, meta-basic knowledge

2. H5 page window automatically adjusts to device width and disables user Zoom page <meta name="viewport" content= " width=device-width,initial-scale= 1.0,minimum-scale=1.0,
4. Maximum-scale=1.0,user-scalable=no " />
6. Ignore numbers in the page as phone numbers <meta name= "format-detection" content="Telephone=no" />
8. Ignore recognition of email addresses in Android platform <Meta name= "format-detection" content= "email=no" />
10. When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS Safari <!--ios7.0 version, Safari has not seen the effect--><meta name=" Apple-mobile-web-app-capable " content=" yes " />
12. 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

1. 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

1. a,button,input,textarea{
2. -webkit-tap-highlight-Color:rgba (0,0,0,0);
3. -webkit-user-modify:read-write-plaintext-only;
4. }

-webkit-user-modify has a side effect, is the input method can no longer enter more than one character in addition, some models do not remove, such as Millet 2 for the button class there is a way, do not use a or input tags, directly with the DIV tag reference " How to remove the border from the A label on Android 1, Winphone system A, the input tag when the translucent gray background generated when clicked on how to remove?

1. <Meta name= "msapplication-tap-highlight" content="No">

2. How to reset the default appearance of WebKit form elements?

1. . css{-webkit-appearance:none;}

3, WebKit form input box placeholder color value can change?

1. input::-webkit-input-placeholder{color:#AAAAAA;}
2. input:focus::-webkit-input-placeholder{color:#EEEEEE;}

4, WebKit form input box placeholder text can be changed line? iOS Yes, Android can't ~ IE10 (winphone8) Form element How does the default appearance 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.

1. Select::-ms-expand {display: none;}

2, disable radio and checkbox default style::-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 can get the effect we want.

1. input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
2. Display: none;
3. }

3, disable the PC-side form input box The default Purge button when the form text input box will display a text Clear button,::-ms-clear for the removal button modification, the same setting to make it hidden (display:none) and use the background image to decorate can get the effect we want.

1. input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
2. Display: none;
3. }

4, prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures

1. . Css{-webkit-touch-callout: None}

5. Disable the selection of text for iOS and Android users

1. . Css{-webkit-user-select:None}

Refer to how do I change the appearance of form elements (for Webkit and IE10) How do I make a call to send a text message? 1. Call

1. <a href="tel:0755-10086"> Call: 0755-10086</a>

2, texting Winphone system invalid

1. <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:

1. <div class="Btn-blue"> button </div>

1. <script type="Text/javascript" >
2. Document.addeventlistener ("Touchstart", function () {}, true)
3. </script>

Compatibility ios5+, partial Android 4+, Winphone 8 to be fully compatible, you can control the class name of the button by binding Ontouchstart and Ontouchend

1. <div class="Btn-blue"> button </div>

1. <script type="Text/javascript" >
2. Varbtnblue = Document.queryselector (". Btn-blue");
3. Btnblue.ontouchstart = function () {
4. This.classname = "Btn-blue btn-blue-on"
5. }
6. Btnblue.ontouchend = function () {
7. This.classname = "Btn-blue"
8. }
9. </script>

Events and styles for screen rotation 1, event window.orientation, value: Plus or minus 90 indicates that the horizontal screen mode, 0 and 180 are displayed as vertical screen mode;

1. Window.onorientationchange = function () {
2. Switch (window.orientation) {
3. CASE-90:
4. Case 90:
5. Alert ("horizontal screen:" + window.orientation);
6. Case 0:
7. Case 180:
8. Alert ("vertical screen:" + window.orientation);
9. Break
10. }
11. }

2. Style

1. /* style used when vertical screen */
2. @media All and (orientation:portrait) {. css{}}

1. /* style used on horizontal screen */
2. @media All and (orientation:landscape) {
3. . css{}
4. }

Audio elements and video elements cannot be automatically played in iOS and andriod the solution: touch-on-screen

1. $ (' HTML '). One (' touchstart ',function () {
2. Audio.play ()
3. })

You can refer to the "audio elements that cannot be played automatically" Shake function HTML5 devicemotion: The event that encapsulates the motion sensor data, can get the motion acceleration of the mobile phone. Mobile photos and upload pictures <input type= "file" > Accept Properties <!--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 does not support Browser users adjust the font size after the page dwarfish, how to prevent user adjustment? The reason anroid is a carbon layoutinflater. TextView did a unified processing iOS is modified the Body.style.webkitTextSizeAdjust value of the general solution: Android temporarily no plan iOS use-webkit-text-size-adjust disable font resizing

1. Body{-webkit-text-size-adjust: 100%!important;}

The best solution: Entire page eliminate transition splash screen with REM or Percent layout

1. . css{
2. /* Set how inline elements are rendered in 3D space: Reserved 3d*/
3. -webkit-transform-style:preserve-3d;
4. /* (sets whether the reverse side of the element being converted is visible when facing the user: hidden) */
5. -webkit-backface-Visibility: hidden;
6. }

Turn on hardware acceleration, resolve page flicker, and ensure smooth animation

1. .CSS&NBSP;{&NBSP;&NBSP;
2.    -webkit-transform:  Translate3d (0, 0, 0) ;   
3.    -moz-transform: translate 3d (0, 0, 0);   
4.    -ms-transform: translate 3d (0, 0, 0);   
5.    transform: translate3d (0, 0, 0)   
6. }  

Refer to "Using CSS to turn on hardware acceleration to improve website performance"   Cancel input under iOS, enter the default capitalization of the initials <input autocapitalize= "off" autocorrect= "off"/>  android Remove the Voice input button Input::-webkit-input-speech-button {display:none}android 2.3 bug @-webkit-keyframes Need to end with 0% start 100%, 0% percent of the semicolon cannot be removed after and before pseudo class cannot be used animation  border-radius not supported% unit translate percent of the notation and scale together will cause invalidation, For example-webkit-transform:translate ( -50%,-50%) scale ( -0.5, 1) Android 4.x bug Samsung Galaxy S4 Browser does not support Border-radius abbreviations when setting Border-radius and background color, the background colors overflow to some parts of the phone (such as Samsung), a link supports the mouse: visited event, that is, the text becomes purple after the link is accessed.   reference to "Border-radius injury"   design several elements of high-performance CSS3 animations use the composition attributes transform and opacity as much as possible to design CSS3 animations, Use position left and top to locate and use Translate3d to turn on GPU acceleration   reference "High performance animations"  fixed Bugios fixed element easy to locate error, Soft keyboard pop-up, affect fixed element positioning Android under fixed performance to be better than iOS, soft keyboard pop-up, will not affect fixed element positioning iOS4 not support position:fixed solution: Available isroll.js, no perfect solution   Refer to "Mobile Web page Use position:fixed problem summary" "Use Iscroll.js to solve the problem of position:fixed not supported under iOS4" How to block windows Phone's default touch event Winphone The default Touch event event using E.preventdefault is not valid   The current workaround is to use styles to disable  

1. Html{-ms-touch-action:none;} /* Disable Winphone Default Touch event */

Reference: "Windows phone 8 Touch support" Common mobile-side framework zepto.js syntax and jquery almost the same, will jquery basic zepto~, the latest version has been updated to 1.16, official website:/http zeptojs.com/Chinese (non-official website): http://www.css88.com/doc/zeptojs_api/frequently used extension module: Browser detection: Https://github.com/madrobby/zepto/blob /master/src/detect.jstap 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 ~, the latest version has been updated to 5.0 official website: http://cubiq.org/iscroll-5 sliding screen frame suitable for the slide screen, Slide screen and so on sliding screen to switch the effect of the page slip.js, islider.js,fullpage.js reprint Source: Enjoy the open >> Mobile mobile end of the Web front-end FAQ Finishing

Some common compatibility issues on the mobile side