Mobile mobile Web front-end FAQ

Mobile FAQs and Solutions I. Meta-basics

2. H5 page window automatically adjusts to device width and prevents users from zooming the page
   1. <meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale= 1.0,user-scalable=no " />
4. Ignore numbers in a page as phone numbers
   1. <meta name= "format-detection" content= "Telephone=no" />
6. Ignore the recognition of email addresses in the Android platform
   1. <meta name= "format-detection" content= "Email=no" />
8. When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS safari
   1. <!--the ios7.0 version, you can't see the effect on safari--
   2. <meta name= "apple-mobile-web-app-capable" content= "yes" />
10. Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style
    1. <!--optional default, black, Black-translucent---
    2. <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}

iOS How to remove the translucent gray matte that is generated when the element is touched in the 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;)}

Part Android How do I get rid of the border when elements are clicked on the system?

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 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?

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 no ~

IE10 ( Winphone8 How does the default appearance of the form element 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 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.

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

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.

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 to change the appearance of form elements (for Webkit and IE10)"

How do I make a call and send a text message?

1. Call

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

2. Send SMS

Winphone System is 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"> buttons </div>

1. <script type= "Text/javascript" >
2. Document.addeventlistener ("Touchstart", function() {}, true)
3. </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

1. <div class= "Btn-blue"> buttons </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. Events

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 do not play automatically in iOS and Andriod

Solution: Touch screen is broadcast

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

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

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

The best solution: use REM or Percent layout for the entire page

Eliminate Transition splash screen

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 {
2. -webkit-transform:translate3d (0, 0, 0);
3. -moz-transform:translate3d (0, 0, 0);
4. -ms-transform:translate3d (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 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 iOS4

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

1. 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 jquery is basically zepto~, the latest version has been updated to 1.16, 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 drop-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 sliding screen on the slide screen, left and right slide screen to switch page effect

slip.js, islider.js,fullpage.js

Mobile mobile Web front-end FAQ