移動端開發 干貨知識分享

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