H5 page window automatically adjusts to device width and prevents users from zooming the page
<name= "Viewport" content= "width=device-width,initial-scale=1.0, Minimum-scale=1.0,maximum-scale=1.0,user-scalable=no "/>
Prevent numbers in a page from being recognized as phone numbers
<name= "format-detection" content= "Telephone=no"/>
Prohibit recognition of e-mail addresses in the Android platform
<name= "format-detection" content= "Telephone=no" />
Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style
<name= "Apple-mobile-web-app-status-bar-style" content= "BLACK" ><!-- -
Viewport templates
<!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></Head><Body>content</Body></HTML>Summary of issues
Mobile-side Font definition
Scene Description: mobile phone system ios,android, etc. is not supported Microsoft Ya Black font
Solution One: @font-face defined as Microsoft Black font and placed on the Web server
@font-face{font-family:' Microsoftyahei ';src:url (' Microsoftyahei.eot ');/*IE9 Compat Modes*/src:url (' microsoftyahei.eot #iefix ') format (' Embedded-opentype '),/*IE6-IE8*/url (' microsoftyahei.woff ') format (' Woff '),/*Modern Browsers*/url (' microsoftyahei.ttf ') format (' TrueType '),/*Safari, Android, IOS*/url (' Microsoftyahei.svg#microsoftyahei ') format (' SVG ');/*Legacy IOS*/}<!--Cons: Consume user traffic, page opening speed causes delay---
Solution Two: Mobile Phone no need to define the Chinese font, using the system default, English fonts and digital fonts can use Helvetica (three kinds of systems are supported)
Body {font-family:Helvetica;} <!--disadvantages: Naturally, fonts cannot be guaranteed and the design drawing font has been --Mobile Click Screen generates 200-300MS delay
Solution:
(1) Fastclick.js
(2) Zepto Tap event is also to solve the click Delay problem
WebKit how the default appearance of form elements is reset
-webkit-appearance:none;
Color settings for placeholder in WebKit
Input::-webkit-input-placeholder {color:#AAAAAA;} Input:focus::-webkit-input-placeholder {color:#EEEEEE;}Prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures
-webkit-touch-callout:none;
Prevent iOS and Android users from selecting text
-webkit-user-select:none;
How to make a phone call and send a message
<!--call--><a href= "tel:13127995008" > Call:13127995008</a><!--send SMS winphone system Invalid-->< A href= "sms:13127995008" > Text message to: 13127995008</a><!--write mail--><a href= "mailto:[email protected]" >[ Email protected]</a>
Fixed (fix positioning) bug
Scenario Description:
(1) Fixed element in iOS prone to dislocation, software disk popup, the impact of fixed element positioning
(2) Android under fixed performance is better than iOS, when the software tray pops up, does not affect the fixed element positioning
(3) Position:fixed not supported under iOS4
Solution: available Iscroll.js
Mobile-side button hover effect simulation
<! DOCTYPE html>{Display:Block;Height:42px;Line-height:42px;text-align:Center;Border-radius:4px;font-size:18px;Color:#FFFFFF;Background-color:#000;}. Btn_black_hover{Background-color:#555;}</style>{this.classname = "Btn_black btn_black_hover";}btnblue.ontouchend = function (){this.classname = "Btn_black";}</script></body>
Reset WebKit form Default Style
-webkit-appearance:none;
Disable the shadow or border that the element is clicked on
A,button,input,textarea {-webkit-tap-highlight-color: rgba (0,0,0,0;)}Bug fix for Select,input,textarea element not clickable in ISCROLL4 scrolling area
Cause:iScroll4 to listen to the entire page event, for best results, it disables default events for all elements by default (except for thea tag ), causing these form elements to click unresponsive and not focus properly
Solution 1:
Found in Iscroll.js: Onbeforescrollstart:function (e) {E.preventdefault ();}
To be replaced by: Onbeforescrollstart:function (e) {var nodeType = E.explicitoriginaltarget? E.explicitoriginaltarget.nodename.tolowercase (): (E.target e.target.nodename.tolowercase (): "); if (nodeType! = ') Select ' && nodeType! = ' option ' && nodeType! = ' input ' && nodeType! = ' textarea ') {E.preventdefault ();}}
Zepto.js in Tap using E.stoppropagation () to block event bubbling is not valid
<div class= "Li_item" ><span class= "Mypoto_cur" ></span></div>$ ('. Myphoto_list '). Delegate (' . Li_item ', ' tap ',function(e) {if(!$ (e.target). Hasclass ("Mypoto_cur")) { .... // Add a layer of judgment });Iscroll.js
The fix page does not support elastic scrolling and does not support fixed issues
Realize drop-down refresh, slide screen, zoom and other functions
Official website: http://cubiq.org/iscroll-5
Bug fix for Select,input,textarea element not clickable in ISCROLL4 scrolling area
Zepto.js
The syntax is almost the same as jquery, and jquery is basically zepto (jquery Lite, reducing file size and boosting page loading speed)
Official website: http://zeptojs.com/
Chinese (non-official): http://www.css88.com/doc/zeptojs_api/
Sliding screen Frame
Suitable for upper slide screen, left and right slide screen, etc.
Islider.js Https://github.com/peunzhang/iSlider
Swiper.js (Chinese net) http://www.swiper.com.cn/
Mobile Web-Note finishing
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
