移動端開發 乾貨知識分享

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

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

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

 

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

     緣由：border-image 後面默認加了fill關鍵字

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

 

三、部分安卓機對鍵盤事件不兼容，若是是對輸入框內容監聽變化可用input事件

 

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

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

 

五、防止按鈕點擊時 背景閃爍

      html{

          -webkit-tap-highlight-color: transparent;

      }

 

六、設置input的placeholder內容樣式的方法

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

七、兼容iOS僞類 :active   須要給 document 綁定 touchstart 或 touchend 事件
    document.addEventListener('touchstart',function(){},false);

 

八、消除 IE10 裏 input輸入框右側的叉號

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

 

九、 禁止用戶選中文字

     -webkit-user-select:none

 

十、騰訊移動端解決方案

        https://github.com/AlloyTeam/Mars

 

十一、移動設備尺寸大全

      http://screensiz.es/phone​

 

十二、各類參考手冊

         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

 

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