移動端問題總結

• 解決移動端 1px 線的問題

&:after {
  border: 1px solid red;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

• 移動端安卓手機和蘋果手機 placeholder 不垂直居中的問題

設置 line-height 與 font-size 相等，input 高度用 padding 填充。

• 分享功能、登錄功能 結合釘釘

釘釘開發文檔：https://ding-doc.dingtalk.com/doc#/dev/swk0bg

• 上傳文件 圖片 功能實現 （當沒有合適的 UI 組件時考慮使用）

// 文件上傳
fileChange = async e => {
  const formData = new FormData();
  const filrData = document.getElementById("file").files;
  formData.append("file", filrData[0]);
  formData.append("type", "avatar");
  const fileurl = await postData(Api.upload, formData, {
    "Content-Type": "multipart/form-data"
  });
  // 其他操作。。。
};

<div
  className={styles.fileWarpper}
  style={{ background: avatar === "" ? "" : `url(${avatar})` }}
>
  <input
    type="file"
    accept="image/*" // 指定文件的類型
    className={styles.fileUpload}
    onChange={this.fileChange}
    id="file"
  />
</div>;

.fileWarpper {
  width: 100px;
  height: 100px;
  background-size: 100px 100px !important;
  background-repeat: no-repeat;
  .fileUpload {
    width: 100px;
    height: 100px;
    opacity: 0;
    z-index: 1000;
  }
}

• h5 軟鍵盤把內容頂上去了