移動端開發乾貨知識分享

1、在手機端如果1px線條仍然顯示過粗，可以使用css新屬性border-image邊框影像來解決

     例：border-image: url(../img/line-img1.png) 2 0 round;

     關於border-image熟悉的介紹：http://www.w3cplus.com/content/css3-border-image

 

2、在部分安卓機上使用border-image後，發現內容區域設定 :active 後不起作用。

     原因：border-image 後面預設加了fill關鍵字

     解決辦法：使用的邊框圖片，圖片中間區域背景一定要是透明的。

 

3、部分安卓機對鍵盤事件不相容，如果是對輸入框內容監聽變化可用input事件

 

4、部分iphone上，頁面內如果有position:fixed固定內容，第一次滑動頁面時，固定內容會隨頁面滑動，鬆開手後，內容回到原位。bug原因和覆蓋範圍未知。

      解決辦法：用js控制固定內容第一次滑動時的的top值

 

5、防止按鈕點選時 背景閃爍

      html{

          -webkit-tap-highlight-color: transparent;

      }

 

6、設定input的placeholder內容樣式的方法

    input::-webkit-input-placeholder{
        color:#999;
        font-size: 14px;
    }

7、相容iOS偽類 :active   需要給 document 繫結 touchstart 或 touchend 事件
    document.addEventListener(`touchstart`,function(){},false);

 

8、消除 IE10 裡 input輸入框右側的叉號

      input:-ms-clear{ display:none; }

 

9、 禁止使用者選中文字

     -webkit-user-select:none

 

10、騰訊移動端解決方案

        https://github.com/AlloyTeam/Mars

 

11、移動裝置尺寸大全

      http://screensiz.es/phone​

 

12、各種參考手冊

         css: http://css.doyoe.com/

         javascript:  https://msdn.microsoft.com/zh-CN/library/yek4tbz0.aspx

         zepto:  http://www.css88.com/doc/zeptojs_api/

         jquery: http://tool.oschina.net/apidocs/apidoc?api=jquery

 

13、input輸入框輸入內容後，點選自定義清空內容的按鈕，鍵盤收起的問題
       解決辦法：按鈕用input標籤，改變樣式為按鈕樣子，點選刪除後，設定原輸入框focus();

本文轉自挨踢前端部落格園部落格，原文連結http://www.cnblogs.com/duanhuajian/p/4643393.html如需轉載請自行聯絡原作者

@挨踢前端