Meta Basics
H5 page window automatically adjusts to device width and prevents users from zooming the page
1 < name= "Viewport" content= "width=device-width,initial-scale=1.0, Minimum-scale=1.0,maximum-scale=1.0,user-scalable=no "/>
Viewport template--general
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metacontent= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name= "Viewport"><Metacontent= "Yes"name= "Apple-mobile-web-app-capable"><Metacontent= "BLACK"name= "Apple-mobile-web-app-status-bar-style"><Metacontent= "Telephone=no"name= "Format-detection"><Metacontent= "Email=no"name= "Format-detection"><title>Title</title><Linkrel= "stylesheet"href= "Index.css"></Head>
Mobile-Touch Events
Touch events that trigger when a user's finger is placed on a mobile device that slides on the screen
touchstart--occurs when the finger touches the screen.
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
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 ~
::-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;
}
Audio elements and video elements do not play automatically in iOS and Andriod
Solution: Touch screen is broadcast
$ (' HTML '). On (' Touchstart ', function () {
Audio.play ()
})
Play Video not fullscreen
<!--
1.ios7+ Support Auto Play
2. Airplay-enabled devices (e.g. speaker, Apple TV) playback
X-webkit-airplay= "true"
3. Playback Video Not full screen
Webkit-playsinline= "true"
-
<video x-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplay src= "/http" ></video>
Mobile Side-Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
