1, gray translucent mask ios system element is generated when a touch how to remove
ios user clicks on a link, there will be a translucent gray mask, if you want to disable, set -webkit-tap-highlight-color set last bit alpha value is 0, that is, the property value is 0 can be removed translucent gray mask
a, button, input, textarea { -webkit-tap-highlight-color: rgba (0,0,0,0;)}
2, webkit form inputs it to change color value placeholder
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;} 3, webkit form input box placeholder text can wrap it
ios can, android not ~
at textarea label can wrap ~
4, prohibiting ios long time and does not trigger the system menu, long-time ban ios & android download pictures
.css{-webkit-touch-callout: none} 5, prohibits ios and android users select the text
.css{-webkit-user-select:none} 6, phone text messaging to write e-mail how to achieve
打电话： <a href="tel:0755-10086">打电话给:0755-10086</a> 发短信，winphone系统无效 <a href="sms:10086">发短信给: 10086</a> 写邮件： <a href=“mailto:[email protected]">[email protected]</a> 7, the analog button hover effect
The effect of mobile end touch of a button, the user can express something was about to happen, is a relatively good experience, but the mobile device and no mouse pointer, use the hover css does not meet our needs, but fortunately there is a foreign activate the mobile terminal active effect of css.
1, added directly on the body ontouchstart, the same effect of the mobile terminal may activate the active css and more recommended in this way (compatibility ios5 +, + part. 4 Android, WinPhone. 8)
2, to achieve fully compatible way, by tying ontouchstart and ontouchend given to the class name of the control buttons
8, audio elements and video elements can not automatically be played in andriod and ios
Response options: touch-screen-play
$('html').one('touchstart',function(){ audio.play() }) 9, eliminating the transition splash screen
Networks are so written, but I did not test it out
.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility: hidden; } 10, turn on hardware acceleration
1, solve the white flash page
2, to ensure smooth animation
.css {
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 11, cancel input time at ios, enter the default uppercase first letter
<input autocapitalize="off" autocorrect="off" /> 12, android remove the speech input button
input::-webkit-input-speech-button {display: none} 13, H5 page window is automatically adjusted to the width of the device, and prevents users zoomed page
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 14, ignoring the digital identification page for the phone number
<meta name="format-detection" content="telephone=no" /> 15, ignoring the Android platform in the recognition of email address
<meta name="format-detection" content="email=no" />Author: Lifetime growing personality
link: https: //www.jianshu.com/p/afbec9ae84e7
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.