移動端、微信開發注意事項

1、ios調起鍵盤，頁面沒有恢復問題（fixed定位缺陷導致）

this.$nextTick(() => {
  window.scrollTo(0, 0);
});

也可以使用iScroll插件進行解決。
iScroll鏈接地址：http://caibaojian.com/iscroll-5/
較詳細解說CSDN：https://blog.csdn.net/weixin_34102807/article/details/91467605
2、阻止旋轉屏幕時自動調整字體大小

* {
  -webkit-text-size-adjust: none;
}

3、修改移動端點擊高亮效果

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

4、iOS下取消input在輸入的時候英文首字母的默認大寫

<input type="text" autocapitalize="none">

5、禁止 iOS 識別長串數字爲電話

<meta name="format-detection" content="telephone=no" />

6、禁止 iOS 彈出各種操作窗口

*{
	-webkit-touch-callout: none;
}

7、一些情況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發,以及禁止圖片長按放大保存、點擊穿透（）

*{
	pointer-event:none;
}

8、input的placeholder會出現文本位置偏上

input{
	line-height：normal;
}

9、使用vue-cli proxyTable進行反向代理，解決跨域問題

//1.在config/index.js文件中配置：
proxyTable: {
  '/api': {
    target: 'http://www.example.com', // your target host
    changeOrigin: true, // needed for virtual hosted sites
    pathRewrite: {
      '^/api': ''  // rewrite path
    }
  }
}
//2.使用http-proxy-middleware插件對api請求地址進行代理
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

10、圖片等比縮放

<div class="parent">
  <img :src="imgSrc" alt="">
</div>

<style lang="stylus" scoped>
//豎屏
.parent {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  
  img {
    width :100%;
    height: auto;
  }
}

//橫屏附加代碼
@media (orientation: landscape) {
  img {
    width auto
    height 100%
    margin auto
  }
}
</style>

11、消除transition閃屏問題

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

轉載地址：https://blog.csdn.net/m0_37036014/article/details/81232648