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

作者 happyWang 日期 2014-07-28 Views
给移动端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 框无法访问