Tips for tips on moving the front end

Meta Basics

H5 page window automatically adjusts to device width and prevents users from zooming the page

<metaname= "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

<metaname= "Format-detection" content= "Telephone=no"/>

Ignore the recognition of email addresses in the Android platform

<metaname= "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

<metaname= "apple-mobile-web-app-capable" content= "yes"/><!--ios7.0 version, you can't see the effect on safari--

Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style

<metaname= "Apple-mobile-web-app-status-bar-style" content= "BLACK"/><!--optional Default, black, Black-translucent--

Viewport templates
Viewport template--general

<! DOCTYPE html>
Viewport template –target-densitydpi=device-dpi,android 2.3.5 The following versions are not supported
<! DOCTYPE html>
Reference case: Http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl
Problems
How the mobile side defines the font font-family
Chinese font Use system default, English with Helvetica
/* Code */body{font-family:helvetica for the mobile-defined font;}
Refer to "Thinking of using fonts on the mobile side"
Mobile font Unit font-size Select px or REM
For a small number of mobile devices only need to fit, and the resolution of the page has little impact, the use of PX can
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:321px) and (max-width:375px) {html{font-size:11px}} @media the screen and ( MIN-WIDTH:376PX) and (max-width:414px) {html{font-size:12px}} @media screen and (min-width:415px) 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) {html{font-size:25px}}
Mobile Touch Events (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
 
   
 
  
TouchEvent

 
  

  
   
 
    
Touches: Information about all the fingers on the screen
 
    
Targettouches: Finger information in the target area
 
    
Changedtouches: The last finger information that triggered the event
 
    
Touchend, touches and targettouches information will be deleted, changedtouches the last information saved, preferably used to calculate finger information
 
   
 
  
Parameter information (Changedtouches[0])

 
  

  
   
 
    
ClientX, clienty coordinates in the display area
 
    
Target: Current element
 
   
 
  
Reference: Https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
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
 
   
 
  
Mobile Click Screen generates 200-300 MS Latency response
Web pages on mobile devices are 300ms delayed, and playing can cause button click Delay or even click Invalidation.
Here are the historical reasons for sharing a colleague from a company:
In 2007, Apple released the first iphone on the iOS system with safari in order to apply to the PC-side of the large screen can be better displayed on the mobile phone, using double-click Zoom (double tap to zoom) scheme, such as you on the phone with a browser to open a Web page on a PC , you may see the page content although can fill the entire screen, but the font, pictures are very underestimated, at this time you can quickly double-click on a part of the screen, you can see the part of the enlarged content, double-click to return to the original state.
Double-click Zoom refers to a quick click on the screen with your finger two times, and IOS comes with a Safari browser that zooms the page to its original scale.
The reason for this is how the browser needs to determine the quick click, when the user clicks an element on the screen, such as a jump link <a href= "#" ></a>, where the browser captures the click First, However, the browser can not determine whether the user is simply to click on the link or double-click on the area to zoom, so, after capturing the first click, the browser will hold a period of time t, if the user does not make the next click in the t time interval, then the browser will do a click Jump link processing, If the user makes a second click in the T-time, the browser disables the jump and instead zooms in on that portion of the area's page. So how much does this time interval t have? Under iOS Safari, it's about 300 milliseconds. This is the origin of the delay. The consequences of the user simply click on the page, the page takes a while to respond, give the user a sense of slow experience, for the web Developer, the page JS capture Click event callback function processing, requires 300ms before it takes effect, also indirectly lead to affect the processing of other business logic.
Solution:

 
  

  
   
 
    
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

 
  

  
   
 
    
Ontouchstart
 
    
Ontouchmove
 
    
Ontouchend
 
    
OnClick
 
   
 
  
Solve problems with 300ms latency, or you can speed up response to events by binding Ontouchstart events
What is the retina display and what's the problem?
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:100px100px;}
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}
Refer to the principle and design of HD display
How to remove the 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 to remove the 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"
Winphone system A, input tag generated when clicked on a translucent gray background how to remove
<metaname= "Msapplication-tap-highlight" content= "no" >
WebKit how the default appearance of form elements is reset
. Css{-webkit-appearance:none;}
WebKit placeholder color value of form input box can change?
Input::-webkit-input-placeholder{color: #AAAAAA;} Input:focus::-webkit-input-placeholder{color: #EEEEEE;}
WebKit form input Box placeholder can you wrap the text?
iOS Yes, Android no ~
You can change lines under the TextArea tab ~
IE10 (Winphone8) How the default appearance of form elements is reset
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;}
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;}
Disable PC-side form input box default purge button
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;}
Prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures
. Css{-webkit-touch-callout:none}
Prevent iOS and Android users from selecting text
. Css{-webkit-user-select:none}
Refer to "How to change the appearance of form elements (for Webkit and IE10)"
How to make a phone call and send a message
Call
<ahref= "tel:0755-10086" > Call:0755-10086</a>
Texting, Winphone system invalid
<ahref= "sms:10086" > Texting: 10086</a>
To write a message, refer to the "How to send a message to a user on a mobile Web page"
<ahref= "Mailto:[email protected]" >[email protected]</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,
<! DOCTYPE html>
Compatibility ios5+, part Android 4+, Winphone 8
 To achieve full compatibility, you can control the class name of a button by binding Ontouchstart and Ontouchend 
 
<! DOCTYPE html>
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:case90:alert ("Horizontal screen:" + window.orientation ); Case0:case180:alert ("vertical screen:" + window.orientation); break;}}
Style
The style used when the vertical screen is @media all and (orientation:portrait) {. css{}}//the style used when traversing the 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 Photo--><inputtype=fileaccept= "image/*" ><!--Select video--><inputtype=fileaccept= "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
Browser users adjust the font size after the page dwarfish, how to prevent users to adjust
Reason
The Android side is a copy of the Layoutinflater to TextView to do a unified treatment
iOS side is modified with body.style.webkitTextSizeAdjust value
Solution:
Android uses the following code, which is only available under the browser (thanks to Jationhuang)
/*** page Add this code to make the Android machine page no longer subject to user font scaling force change * But there will be a delay of about 1 seconds, the period can be considered through the loading display * for reference only * * (function () {if (typeof ( Weixinjsbridge) = = "undefined") {Document.addeventlistener ("Weixinjsbridgeready", function (e) {setTimeout (function ( {weixinjsbridge.invoke (' Setfontsizecallback ', {"fontSize": 0},function (RES) {alert (json.stringify (res));});},0);}); Else{settimeout (function () {Weixinjsbridge.invoke (' Setfontsizecallback ', {"fontSize": 0},function (RES) {alert ( Json.stringify (res));});},0);}) ();
iOS uses-webkit-text-size-adjust to disable font resizing
Body{-webkit-text-size-adjust:100%!important;}
The best solution:
Entire page with REM or Percent layout
Eliminate Transition splash screen
That's what the network says, but I didn't test it.
. css{/* sets how embedded elements are rendered in 3D space: Reserved 3d*/-webkit-transform-style:preserve-3d;/* (Sets the back of the element that is 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);}
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
<inputautocapitalize= "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 animation animation
 
      
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
 
      
Android cannot play multiple audio at the same time
 
     
 
    
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 Solutions

 
    

  
     
 
      
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"
Play Video not fullscreen
<!--1.ios7+ support AutoPlay 2. Devices that support airplay (e.g. speaker, Apple TV) play x-webkit-airplay= "true" 3. Play video not full screen webkit-playsinline= "true"-- ><videox-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplaysrc= "http//" ></video >
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
The fix page does not support elastic scrolling and does not support issues caused by fixed ~
Realize 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
Underscore.js
I did not use, but heard that good, recommend to everyone ~
The library provides a full set of functional programming functions, but does not extend any JavaScript built-in objects.
The latest version has been updated to 1.8.2
Official website: http://underscorejs.org/
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
Flex layouts
Flex layout can now be used in the mobile, not all the syntax is fully compatible, but the following writing the author has practiced, the effect is good ~
/* ============================================================flex: Define layout as box model flex-v: Box model Vertical Layout flex-1: child elements occupy the remaining space Flex-align-cen ter: Child elements are centered vertically flex-pack-center: child elements are centered horizontally flex-pack-justify: child element Justification Compatibility: iOS 4+, Android 2.3+, winphone8+================== ========================================== */.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox ;d Isplay:flex;}. Flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction: Column;}. Flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}. Flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center ;}. Flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content: Center;}. flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify; Justify-content:space-between;}
Example: Justify on both sides
<! DOCTYPE html>
Use Note: Sub-elements under flex must be block-level elements, non-block-level elements flex-invalidated under the android2.3 machine
Reference:
Flexyboxes
The "old" Flexbox and the "new" Flexbox
Cross-browser Flexbox
Fastclick
Eliminate the 300 delay between triggering the Click event on a mobile browser and a physical tap (tap)
Tips for tips on moving the front end