移動端經驗總結(持續更新)

看風景就發表於2017-03-03

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();
})

 

相關文章