網上也有許多的 webapp 填坑記錄了,這幾個月,我在公司正好也做了2個,碰到了一些問題,所以我在這裏記錄一下我所碰到的問題:

• meta 頭部聲明
  在開發的時候,剛剛創建 HTML 文件,再使用瀏覽器的手機模式是沒有手機上的效果的,所以要在頭部添加:
  

  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

  這一串代碼,就會模擬出手機的效果,並且還有其他好處:

  width=device-width ：表示寬度是設備屏幕的寬度
  initial-scale=1.0：表示初始的縮放比例 
  user-scalable=no：表示用戶是否可以調整縮放比例
  minimum-scale=1：表示最小的縮放比例 
  maximum-scale=1：表示最大的縮放比例 

  
  
  

• css 寬度使用 rem
  這個網上有很多源碼可以使用,加載一下不超時10多 k 的大小吧,簡單好用,好處就是比如0.5rem大小的字體可以根據手機屏幕的大小自動縮放,不過有一些也可以不用,可以用 px 來代替,比如: border,background-size等等,還有寬度,高度,也盡量用百分比來控制會好點;
  
  
  
  
• 頁面布局 flex
  盡量采用 flex 布局,關於上下,左右居中都十分方便,這裏給出我之前寫過的一片博客關於 flex 布局的 http://www.cnblogs.com/Grewer/p/7618096.html
  還有最重要的一點就是在 flex 布局裏,如果最大的節點高度設為100%的話,要註意手機軟鍵盤的問題,點開軟鍵盤可能會讓元素發生縮放,這個時候可以使用flex-shrink:0
  使用 flex 布局,最好定義一個全局變量,比如 .flex{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}然後再其他頁面加上 flex的 class 就可以方便的使用;
  
  
  
  
• 表單提交
  在 webapp 裏表單提交的體驗很差,可能 h5的 api 沒有什麽好的支持,比如在填寫賬號和密碼的時候,我剛填寫完賬號,軟鍵盤的右下角是確定或者確認的字樣,很奇怪;雖然可以監聽回車鍵的動作,調到密碼欄裏,但是對於這我還是有強迫癥的,然而我也並沒有什麽好的方法解決;
  在一個就是填寫賬號密碼,在填寫完密碼後,右下角也還是和上面一樣,並沒有什麽改變,不過這個可以用添加 form 表單的方法解決,詳情請自行搜索;
  還有就是能全部填寫數字的時候 input 的 type盡量寫 number 這樣軟鍵盤打開的時候是數字鍵盤,比 text 體驗會好很多;
  再就是上傳圖片的問題,盡管只需要添加一個 input type="file" 的標簽就行了,但是任然沒有 api 可以自由選擇照片的來源是照相機還是相冊,我在網上搜索的時候,發現他們說是capture=“camera”這個可以解決,但是我親身測驗我的 iPhone 和 Android 都沒有效果,和沒有加一樣;
  
  
  
• iPhone 自帶的a標簽特效
  不知道你們有沒有這個,反正我這兒是有的,就是原來是淡灰色的下劃線,點擊或者刷新任何頁面後,再進去此頁面,下劃線顏色會變得更深,感覺又細了很多,這是 iPhone 的自帶效果
  可以同過全局或局部的 a 標簽的定義來解決,如像我這樣a:link {color: #d9d9d9}a:visited {color: #d9d9d9}即可
  
  
• border
  border 的寬度問題,很多人想用寬度為0.5px 寬度來設置 border, 但是因為手機型號的問題會讓有的能正常顯示,而又的無法顯示,這個可以使用我這樣的方式來設置

  .item:after {
          border-bottom: 1px dashed #888;
          content: "";
          display: block;
          width:100%;
          -webkit-transform: scale(1, 0.5);
          transform: scale(1, 0.5);
      }

  
  
  待更新 loading...

webapp填坑記錄[更新中]