技術標籤：file input 移動端選擇資料夾

• 如果有滾動ios會連帶著body一塊滾動 可使用inobounce.js庫解決
• click事件 點選延遲 解決辦法 使用clickfast.js
• 如果使用動畫時出現手機渲染問題 可以加入這幾個屬性依次試一下

transform:translate3d(0,0,0);  // css3動畫渲染加速
transform:scale(1.000000001);  // 擴大
transform:scale(0.999999999); // 縮小
backface-visibility: hidden;  // 隱藏動畫

• filter可以給不規則圖形加陰影

filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5)) 
 

box-shadow 只能給規則圖形加陰影

• 解決安卓手機圓角失效問題

 border-radius: 2px; 
 background-clip: padding-box;

• 解決ios input 預設圓角邊框問題

border-radius: 0;

• android軟鍵盤彈出 會壓縮佈局問題 給被壓縮的容器設定一個最小高度min-height
• calc(四則運算)

1. 用於動態計算長度值。
2. 需要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)；
3. 任何長度值都可以使用calc()函式進行計算；
4. calc()函式支援 "+", "-", "*", "/" 運算；
5. calc()函式使用標準的數學運算優先順序規則；

• 字型大小不要使用奇數字號，帶小數點的更不要提了。也就是說需要被2整除的整數且不可小於12px
• 移動端input輸入placeholder垂直不居中問題

在移動端編寫input輸入框時候，為了輸入文字與輸入框垂直居中，一般情況下，會將input的line-height的高度等於height。但在pc端輸入的時候會發現，雖然輸入內容確實是垂直居中了，但是游標的位置是靠上的，導致感官上的不美觀。於是對input設定的時候，首先確定字型的大小如font-size:16px，其次我們確定設計稿裡input的高度，如input高度為40px，那麼此時的程式碼應該是這樣的：

input{
 height:16px;
 line-height:16px;
 padding:12px 0;
 border:1px solid #ddd;
}

這樣的程式碼在移動端無論是視覺還是輸入時都是符合要求的。可是html5出來一個新屬性，那就是placeholder，不得不說這個屬性的出現解救了以往繁瑣的js實現效果，但是，當你給input設定了placeholder後，在pc端看，好像是偏上了那麼一點點，好像也不是很影響使用。但是在手機端瀏覽後，就會發現雖然輸入文字可以垂直居中，placeholder裡的內容明顯的靠上，嚴重的不美觀。

在網上查了一些資料，對於原理性的解釋好像基本上沒看到。但是國外的網站對這個屬性給了一個預設的建議，那就是不要設計input的line-height或者設定line-height為normal，即可。

不過，又發現問題了，雖然在手機端正常，但是在pc端看的時候，placeholder還是有點偏下的感覺。強迫症害死人啊。。。那怎麼辦。。。設定line-height：1.5em，或者將em換算成實際的px也可以。

• H5微信開發iOS 6.4.7真機上input調起軟鍵盤後不回彈的解決方案

問題描述：input輸入在iOS的微信中調起軟鍵盤之後，輸入完成收起軟鍵盤的時候頁面下方（原來軟鍵盤的位置）有空白，這將導致下方fixed定位按鈕失效等問題，解決方案：通過給input新增失去焦點事件，觸發該事件的時候使頁面自動滑動到頂部，親測有效，程式碼如下：

$("input").blur(function(){
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
         }, 300);
 })

• 關於移動端螢幕適配 使用vw單位 但是在pc端比例會比較大 建議在螢幕寬度比較大的情況下加上媒體查詢 例如

@media screen and (min-width: 500px) {
  body {
    max-width: 500px;
    margin: auto;
    position: relative;
  }

  .wrapper {
    position: relative;
    height: 850px;
  }

  .wrapper form {
    height: 230px;
    box-shadow: 0 2.5px 17.5px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
  }

  .wrapper form .form-title {
    font-size: 22px;
  }

 }