Web App Development

Remove mobile browser label default highlight border

-webkit-tap-highlight-color Property

Property Description: This property can refer to setting transparency. If transparency is not set, Safari on iOS gives the color a default transparency. Setting the transparency to 0 disables this property. If you set the transparency to 1, the element will not be visible. Only for iOS (iphone and ipad), is the area background when clicking Feedback, or the highlight background color when clicked.

But I used to find that the Android phone also supports this property, the following is the style I wrote

a,button,input{
-webkit-tap-highlight-color:rgba (255,0,0,0);
-webkit-tap-highlight-color:transparent; /* Android */
}

Forces the width of the document to remain at 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to enlarge; <meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport"/> Safari private meta tag in iphone device, allow full screen mode to browse; <meta content= "yes" name= "apple-mobile-web-app-capable"/> The iphone's private label, which specifies the style of the iphone's status bar on the top of safari; <meta content= "Black" name= "Apple-mobile-web-app-status-bar-style"/> Tell the device to ignore the number on the page as a phone number; <meta content= "Telephone=no" name= "Format-detection"/>

* Add link after closing recognition

Add link after closing recognition

The code is as follows	Copy Code
<a href= "tel:12345654321" > Call me </a> <a href= "sms:12345654321" > Texting </a> <span onclick= "location.href= ' tel:122 '" ></span>

* Use HTML5 tags

Enhance your experience with HTML5 tags for enhanced semantics

* Discard Float Property

Encountered layout of content arrangement display discard float, use display, Webkit-box adaptive layout

* Use CSS3 Border Background properties

The code is as follows	Copy Code
Use-webkit-border-image instead of complex (fillet + inner Glow + highlight)

* Block-level a label

Put each piece of data in a label to enhance the user experience, as far as possible to ensure that the user's clickable area is larger.

* Remove the recognition of Android email address

The code is as follows	Copy Code
<meta content= "Email=no" name= "Format-detection"/>

* Remove control bars for input URLs in iOS and Android

The code is as follows	Copy Code
SetTimeout (scrollto,0,0,0) needs to be placed in window.onload, the content height of the current document must be higher than the height of the window.

* User Rotating Device

Prohibit developers from blocking browser Orientationchange events

* Users are booting your webapp from the main screen

IOS Navigator.standalone to True from the home screen when it starts, false from the site
Android None

* Turn off keyboard auto capitalization in iOS

The code is as follows	Copy Code
Autocapitalize= "Off"

How to completely prohibit users from opening a page in a new window in *ios

The code is as follows	Copy Code
Ios-webkit-touch-callout:none;

Android is not valid.

*ios prevent users from saving pictures/copying pictures

The code is as follows	Copy Code
-webkit-touch-callout:none

How to prevent users from selecting text in *ios

The code is as follows	Copy Code
-webkit-user-select:none

How to get the value of a scroll bar in *ios

The code is as follows	Copy Code
Window.scrolly and WINDOW.SCROLLX

* Resolve box Border Overflow

Width 100% when border overflow,-webkit-box-sizing:border-box;

*android 2.0 The following fillet problem

Must add-webkit-

*android Page Self-adapting

The code is as follows	Copy Code
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/> * How to solve the auto-recognition and auto-add style of 5 digits in the iOS 4.3 version of Safari <meta name= "format-detection" content= "Telphone=no"/>

* Style settings

The code is as follows

Copy Code

<link rel= "Apple-touch-startup-image" href= "startup.png"/>//settings Start Page picture <link rel= "Apple-touch-icon" href= "iphon_tetris_icon.png"/>//You can display good-looking icons when setting bookmarks <link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css"/> www.111cn.net//portrait mode style <link rel= "stylesheet" media= "All and (Orientation:landscape)" href= "landscape.css"/>//Landscape mode style <style media= "All and (orientation:portrait)" ></style>//Vertical screen style used <style media= "All and (Orientation:landscape)" ></style>//horizontal screen style used

* Event

The code is as follows

Copy Code

/Gesture Events Touchstart//triggers when finger touches the screen Touchmove//triggers when a finger that has touched the screen begins to move Touchend//triggers when the finger leaves the screen Touchcancel Touch events Gesturestart//triggered when two fingers touch the screen Gesturechange//Triggers when two fingers start moving after touching the screen Gestureend Screen Rotation events Onorientationchange Detects when a touch screen finger changes direction Orientationchange www.111cn.net Related properties supported by the touch event Touches Targettouches Changedtouches ClientX//X coordinate of touch relative to the viewport (excludes scroll offset) ClientY//Y coordinate of touch relative to the viewport (excludes scroll offset) ScreenX//Relative to the screen ScreenY//Relative to the screen PageX//Relative to the full page (includes scrolling) Pagey//Relative to the full page (includes scrolling) Target/Node The touch event originated from Identifier//An identifying number, unique to each touch event Screen Rotation event: Onorientationchange Window.orientation//0 portrait mode, 90 left-handed, 90 right-handed, 180 landscape mode

* Automatic capitalization and automatic correction

The code is as follows	Copy Code
<input type= "text" autocapitalize= "Off" autocorrect= "off"/>

* Automatically adjust font size when rotating screen is blocked

The code is as follows	Copy Code
HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {-webkit-text-size-adjust:none;}

* Zoom Out image

The code is as follows	Copy Code
@media screen and (max-device-width:480px) { Img{max-width:100%;height:auto;} }

Web App Development