"Original" mobile Web resource Grooming

"Original" mobile Web resource Grooming

Looking back 2014 years, just turned to the new department, very eager to make a so-called successful products, mentality almost changed, every day busy in the project, the original reading and learning habits to neglect, as a technical staff, not through learning new knowledge to enrich themselves, follow the pace of the times, is more deadly , another point is the lack of exercise, feeling the body as before, for example, work too tired, easy to sleep at night, so that they feel frightened, think about it is not happy. So simply set yourself a plan for the first half of 2015:

• Loan to buy a house
• Weekly badminton, running, cycling
• Read "Self-control", "Big Data Age", "logical Thinking"
• Learn "javascript journey", "Sharp JQuery2", "in layman node. js"
• Blog 2 articles per month

Back to Theme ~

End of 2013 contact Mobile, simple summary, first understand the problem of mobile web

• Equipment replacement fast-low-end machine legacy problems, high-end machine brings new challenges
• Browser vendors are not unified--more compatibility issues
• Network more complex--weak network, page open slow
• Poor performance of low-end machine-page operation lag
• HTML5 new technology--learning cost is not low
• Unknown problem--more pits

In the face of these problems, at first we can only in the unknown to test the wrong, know that the wrong solution to find the right solution to the problem, more than 2 years, you can see the mobile web in the industry is increasingly mature, a variety of frameworks and solutions continue to emerge so that mobile development is no longer a nightmare.

These days to think of a bit of experience first listed, follow-up will continue to update, this article can be just contact WebApp development students bring help, any questions welcome message discussion ~

Catalog (updated at 20150311)

• Meta Basics
  • H5 page window automatically adjusts to device width and prevents users from zooming the page
  • Ignore numbers in a page as phone numbers
  • Ignore the recognition of email addresses in the Android platform
  • When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS safari
  • Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style
  • Viewport templates
• Problems
  • How the mobile side defines the font font-family
  • Mobile font Unit font-size Select px or REM
  • Mobile Touch Events (differentiate between WebKit and Winphone)
  • Mobile Click Screen generates 200-300 MS Latency response
  • Response Order of touch events
  • What is the retina display and what's the problem?
  • How to remove the translucent gray matte that is generated when an element is touched in an iOS system
  • How to remove the border when elements are clicked on some Android systems
  • Winphone system A, input tag generated when clicked on a translucent gray background how to remove
  • WebKit how the default appearance of form elements is reset
  • WebKit placeholder color value of form input box can change?
  • WebKit form input Box placeholder can you wrap the text?
  • IE10 (Winphone8) How the default appearance of form elements is reset
  • Prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures
  • Prevent iOS and Android users from selecting text
  • How to make a call and send a text message
  • Analog button Hover effect
  • Events and styles for screen rotation
  • Audio elements and video elements do not play automatically in iOS and Andriod
  • Shake a shake function
  • Mobile photos and uploading pictures
  • Browser users adjust the font size after the page dwarfish, how to prevent users to adjust
  • Eliminate Transition splash screen
  • Turn on hardware acceleration
  • Cancel input under iOS, enter the default capitalization of the English initials
  • Remove the Voice input button on Android
  • Android 2.3 Bug
  • Android 4.x Border-radiu Bug
  • Several elements of designing high-performance CSS3 animations
  • Fixed bug
  • How to block the default touch events for Windows Phone
• Commonly used mobile End frames
  • Zepto.js
  • Iscroll.js
  • Underscore.js
  • Sliding screen Frame
  • Flex layouts
  • Fastclick

Meta Basics 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

<meta name= "apple-mobile-web-app-capable" content= "yes"/><!--ios7.0 version, Safari does not see the effect--

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

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

Viewport templates

<! DOCTYPE html>
FAQ Mobile How to define 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 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-wi dth: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    }}
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
 
  
 
 
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
1, Ontouchstart 2, Ontouchmove 3, Ontouchend 4, 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: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}
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
<meta name= "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 ~
IE10 (Winphone8) How the default appearance of form elements is reset
Disable 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 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 to get the effect we want.
Input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none;}
Disable PC End 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 call and send a text message
Call
<a href= "tel:0755-10086" > Call:0755-10086</a>
Texting, Winphone system 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,
 
<! DOCTYPE html>
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
 
<! DOCTYPE html>Event and Style events 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        :        alert ("Horizontal screen: "+ window.orientation);        Case 0: Case        :        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--><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
 
    
 
   
Browser users adjust the font size after the page dwarfish, how to prevent users to adjust
Reason

 
   

  
    
 
     
The anroid side is a carbon copy. Layoutinflater to TextView to do a unified treatment
 
     
iOS side is modified with body.style.webkitTextSizeAdjust value
 
    
 
   
General Solutions:

 
   

  
    
 
     
Android No program
 
     
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
<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 100%
 
     
After and before pseudo-classes cannot use animations
 
     
Android 2.3 with browser Border-radius does not support% units
 
    
 
   
Android 4.x Border-radiu 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
 
    
 
   
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"
Commonly used mobile End frame 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-center: Child elements are centered vertically   flex-pack-center: child elements are centered horizontally   flex-pack-justify: Justify child elements   Compatibility: iOS 4+, Android 2.3+, winphone8+   ============================================================ */.flex{ Display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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 Flexb
"Original" mobile Web resource Grooming