给移动端webkit内核浏览器的样式预设

解释一些常见的在移动端需要的针对webkit内核浏览器的样式预设,比如让人厌烦的点击高亮


* {
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-touch-callout:none;               

    /* prevent webkit from resizing text to fit */ 
    -webkit-text-size-adjust:none;             

    /* prevent tap highlight color / shadow */
    -webkit-tap-highlight-color:rgba(0,0,0,0); 

    /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-user-select:none;                  
}


-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为

默认情况下,长按图片之后弹窗提示复制图片
默认情况下,长按图片之后弹窗提示复制图片

-webkit-text-size-adjust:none;

-webkit-tap-highlight-color:rgba(0,0,0,0); 避免点击a标签或者注册了click事件的元素时,产生的高亮效果,类似下面这样

点击链接的高亮
点击链接的时候,有一个高亮的浮层效果

-webkit-user-select:none; 禁止 长按文本时候,会在手指按住的地方出现选择文本的两个指针和一个复制,全选的按钮

默认情况下,长按文本之后的表现
默认情况下,长按文本之后的表现

参考链接:http://stackoverflow.com/questions/20853238/webkit-tap-highlight-color-is-not-working

2014年8月9日重大更新:

此种写法有一定的隐含bug,详细情况请参照本人的另一篇文章:webkit浏览器下user-select:none导致input框无法访问

作者: happyWang

Hello, the beautiful world

发表评论