h5開發的一些我的總結

時間 2019-12-05

標籤 h5 開發一些我的總結简体版

原文原文鏈接

在以前開發一些h5活動頁的過程當中，踩過了一些坑，因此整理出一些我的所接觸到的對於h5活動頁開發的總結，主要分爲：佈局適配，交互體驗，兼容，調試工具這四個方面。歡迎你們補充指正。javascript

1. 佈局適配

a. 讓當前viewport的寬度等於設備的寬度

<meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">
複製代碼

理解：css

phys.width，device-width: 通常咱們所指的寬度width即爲phys.width，而device-width又稱爲css-width。其中咱們能夠獲取phys.width即width經過document.documentElement.clientWidth;而獲取css-width經過 window.screen.width獲取。如iphone6的phys.width爲750px，而css-width爲375px。html
瀏覽器的一個默認行爲：假設，瀏覽器若是把電腦端的980px的網頁展示在寬度爲750px的iphone6手機屏上，確定會放不下，手機端橫向會出現滾動條，怎麼處理這個問題呢，很簡單，瀏覽器默認一個虛擬窗口，不一樣瀏覽器有不一樣的虛擬窗口寬度的默認值如：safari iphone：980px; opera:850px; Andriod webkit:800px;IE:974px;而後會把這個980px虛擬窗口裝進寬度爲750px的iphone6中，固然這樣的話必須縮放，這就是爲何在手機中展示電腦端頁面沒有出現橫向滾動條，並且字跡明顯變小的緣由。vue
meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1"的做用體現 (meta標籤中，width有兩個含義，第1、width爲phys.width，第二，width也爲虛擬窗口的width)java
此時的iPhone6的phys.width也變成了css-width即375px，能夠經過document.documentElement.clientWidth獲取獲得此時phys.width確實爲375px。ios
若是此時的設計圖是375px的手機端頁面，此時的虛擬窗口的寬度也爲375px，再裝進phys.width爲375px的手機，固然如設計稿同樣的效果，不會縮放，也不會出現橫向滾動條。es6

b. Rem 適配

爲了精確的還原視覺稿，移動端樣式採用px做爲默認單位，使用postcss-pxtorem做爲轉換rem工具插件
安裝web

yarn add postcss-pxtorem
 #OR
 npm i postcss-pxtorem -S
複製代碼

package.json配置(以width375視覺稿爲準)npm

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": "37.5",
        "propList": ["*"]
      }
    }
  }
複製代碼

在index.html中重置root節點的rem數值json

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    // 事件監聽
    document.addEventListener('DOMContentLoaded', resetRem)
    window.onresize = resetRem
    /**
     * [resetRem 重置Rem數值]
     */
    function resetRem () {
      let documentCtx = document.documentElement
      documentCtx.style.fontSize = documentCtx.clientWidth / 10 + 'px'
    }
  </script>
</html>
複製代碼

input的placeholder文本位置偏上的狀況

input的placeholder會出現文本位置偏上的狀況:PC端設置line-height等於height可以對齊,而移動端仍然是偏上,解決方案時是設置css line-height:normal;

2. 交互體驗

a. 去掉 a，input 在移動端瀏覽器中的默認樣式（禁止 a 標籤背景在移動端使用 a標籤作按鈕的時候，點按會出現一個「暗色」的背景，去掉該背景）

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}
複製代碼

b .禁止長按 a，img 標籤長按出現菜單欄(使用 a標籤的時候，移動端長按會出現一個菜單欄，這個時候禁止呼出菜單欄)：

a, img {
    -webkit-touch-callout: none; /*禁止長按連接與圖片彈出菜單*/
}
複製代碼

c. 流暢滾動

body{
    -webkit-overflow-scrolling:touch;
}
複製代碼

d. 禁止用戶長按選中

-webkit-touch-callout:none;  //系統默認菜單被禁用;能夠實現頁面由於長按彈出各類操做窗口
-webkit-user-select:none; //webkit瀏覽器 
-khtml-user-select:none; //早期瀏覽器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 
複製代碼

e. transition清除閃屏

有時候須要使用到一些動效，可是會出現閃屏的狀況

-webkit-transform-style: preserve-3d; //設置內嵌的元素在 3D 空間如何呈現：保留3D
-webkit-backface-visibility:hidden; //設置進行轉換的元素的背面在面對用戶時是否可見：隱藏
複製代碼

3.兼容

a. vue2.0打包出來的項目在ios9中打開會白屏

這是個較爲隱蔽的問題，當時線上出這個問題的話定位了好久，按照網上搜出來的結果都是說es6的結果沒有轉譯，因此就嘗試安裝了一些轉譯插件。後面發現只須要在config/index.js裏改一下聲明關鍵詞，而後問題就解決了。

const path = require('path')
// 改成
var path = require('path')
複製代碼

b. 某些狀況下非可點擊元素如(label,span)監聽click事件,ios下不會觸發

針對此種狀況只需對不觸發click事件的元素添加一行css代碼便可

cursor: pointer;
複製代碼

c. ios對時間date()的支持不同

var date =new Date("2016-05-31 00:00:00 ");
複製代碼

這種寫法在安卓和pc上都正常的,惟獨在ios手機上會顯示NAN,調試發現,ios上只支持格式:

var date =new Date("2016/05/31 ");
複製代碼

調試發現2016/05/31等同2016-05-31 00:00:00,也就是說ios默認就是從0開始計算的,咱們不須要設置後面的時分秒爲00:00:00

d. text-indent和box-sizing，部分安卓機中使用text-indent屬性會使元素寬度超過100%

// 加上便可正常
box-sizing: border-box;
複製代碼

4.調試工具 --- Xcode

在這些樣式交互完成以後，在移動端咱們須要進行接口調試，這樣的話咱們就很但願能像pc端的開發同樣，能夠看到控制檯, 網絡請求狀況這些信息，可以更好的幫助咱們完成開發，定位問題。以前想查看接口信息的話，是使用charles抓包工具的，可是我的以爲仍是並非那麼方便，沒有作到很好的集成。下面介紹一下我本人習慣使用的工具Xcode