1. Browse window broadband equals device width
<name= "Viewport" content= "width=device-width,initial-scale=1.0, Minimum-scale=1.0,maximum-scale=1.0,user-scalable=no "/>
2. Prohibit digital recognition as phone number
<name= "format-detection" content= "Telephone=no" />
3. No Android recognition email
<name= "format-detection" content= "Email=no"/>
4. Mobile page Basic Template
<!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= "Style.css"></Head><Body>content</Body></HTML>
Other:
1. Cancel input under iOS, enter the default capitalization of the initial English letter
<autocapitalize= "Off" AutoCorrect= "Off"/>
Remove the Voice input button on the 2.android
Input::-webkit-input-speech-button {Display:none}3. Events and styles for screen rotation
Window.onorientationchange = function () { switch (window.orientation) { Span style= "color: #0000ff;" >case -90: case 90: Alert ( "horizontal screen:" + window.orientation); case 0: case 180" vertical: "+ Window.orientat ION); break ; }}// style used when vertical screen @media All and (orientation:portrait) {. css{}} // styles used when traversing a screen @media All and (Orientation:landscape) {. css{}}4.audio elements and video elements do not play automatically in iOS and Andriod
$ (' HTML '). One (' Touchstart ',function() { audio.play ()})Other Related:
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"
The above code usage is as follows
<video x-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplay src= "/http" ></video>
5. Shake and Shake function
//Event Monitoringif(window. Devicemotionevent) {Window.addeventlistener (' Devicemotion ', Devicemotionhandler,false);} Else{document.getElementById ("Dmevent"). InnerHTML = "Not supported on your device."}//capturing the gravitational accelerationvarAcceleration =eventdata.accelerationincludinggravity;//Shake a demovarShake_threshold = 800;varlast_update = 0;varx, Y, Z, last_x, last_y, last_z; functionDevicemotionhandler (eventData) {varAcceleration =eventdata.accelerationincludinggravity; varCurtime =NewDate (). GetTime (); if((curtime-last_update) > 300) { varDifftime = Curtime-last_update; Last_update=Curtime; X=acceleration.x; Y=ACCELERATION.Y; Z=acceleration.z; varSpeed = Math.Abs (x +y + z-last_x-last_y-last_z)/difftime * 10000; if(Speed >shake_threshold) {Alert ("Shaked!"); } last_x=x; Last_y=y; Last_z=Z; }}
Reference: http://segmentfault.com/a/1190000003095883
6. Mobile photos and upload pictures
<!---<typeaccept = "image/*" ><!----< type Accept= "video/*">
Usage Summary:
7. The browser user adjusts 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)
/** * Add this code to the page 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); }})();
Other bugs
Android 2.3 BugRefer to the injury of Border-radius movement
Several elements of designing high-performance CSS3 animationsRefer to "High performance animations"
Fixed bugSolution Solutions
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 PhoneWinphone 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.jsThe 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.jsThe 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.jsI 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 FrameSuitable for sliding screen on the slide screen, left and right slide screen to switch page effect
Slip.js
Islider.js
Fullpage.js
Excerpt from the original: http://www.cnblogs.com/PeunZhang/p/3407453.html#question_18
Mobile page Development Summary [excerpt]
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
