移动端经验总结(持续更新)

1. 字体灰度平滑，抗锯齿(ios,macOS有效，windows无效)

 -webkit-font-smoothing: antialiased

2. 隐藏元素opactiy:0代替display:none

.hidden{
　　opactiy: 0;
　　pointer-events: none;(使元素对鼠标事件等失去响应，ie11+，适合移动端)
}

3.手机中点击链接或button按钮出现黄色边框的解决办法

a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}

或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only;}

4.input，textarea在得到焦点时出现黄色边框的方法

input,button,select,textarea{outline:0}

5.移动端禁止长按弹出菜单

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
/*或者*/
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}   

$('button').bind('contextmenu', function(e) {
  e.preventDefault();
})

 

转载于:https://www.cnblogs.com/mengff/p/6496483.html