移動端H5跳坑指南

前言

在移動端H5應用開發過程當中，咱們不免會碰見不少問題，使得咱們很鬱悶。因此我感受有必要把它們記錄下來，分享給即將踏入移動端 Web 開發大門的朋友們，更好的解決ios和android兼容。

1.input獲取焦點時，頁面被放大

設置meta標籤

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
複製代碼

2.ios input輸入時白屏

這個問題貌似只有再ios9中才有 解決方法：在input的父元素上添加相對定位就好了，很是神奇

style="postion:relative;"
複製代碼

3.軟鍵盤撐起頁面下不來

用js控制focus blur

//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});
複製代碼

4.new Date()設置日期在IOS的兼容問題

通常這樣建立一個日期變量

var d = new Date("2017-08-11 12:00:00");
複製代碼

發如今iOS中不兼容，返回valid Date。 IOS中不支持 - 鏈接日期 須要寫成

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
複製代碼

5.ios頁面滾動不流暢

首先你可能會給頁面的html和body增長了height: 100%, 而後就可能形成IOS上頁面滑動的卡頓問題。

解決方案是：

1.讓html和body固定100%（或者100vh），

2.而後再在內部放一個height:100%的div，設置overflow-y: auto;和-webkit-overflow-scrolling: touch;

.scroll-box {
  /* 模態框之類的div不能放在這個容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
複製代碼

6.position:fixed/absolute隨屏幕滾動

注：ios裏的fixed在某些狀況下不符合咱們的預期，通常咱們會使用absolute模擬fixed行爲 或者能夠在position:fixed/absolute內加入：

-webkit-transform: translateZ(0);
複製代碼

抖動狀況，則在內容區域，加入 ：

overflow-y: auto;
複製代碼

7.點擊元素產生背景或邊框怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0去除灰色半透明遮罩；

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果；

//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
}   
// 也能夠 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
複製代碼

<meta name="msapplication-tap-highlight" content="no">
複製代碼

8.IOS機型margin屬性無效問題？

(1) 設置html body的高度爲百分比時，margin-bottom在safari裏失效

(2) 直接padding代替margin

9.Ios鍵盤換行變爲搜索？

首先，input 要放在 form裏面。

這時 "換行" 已經變成 「前往」。

若是想變成 「搜索」，input 設置 type="search"。

10.iOS 1px border 實現

iOS設備上，因爲retina屏的緣由，1px 的 border 會顯示成兩個物理像素，因此看起來會感受很粗，這是一個移動端開發常見的問題。解決方案有不少，但都有本身的優缺點。

0.5px border
複製代碼

從iOS 8開始，iOS 瀏覽器支持 0.5px 的 border，可是在 Android 上是不支持的，0.5px 會被認爲是 0px，因此這種方法，兼容性是不好的。

另一種方法是背景漸變，

CSS3 有了漸變背景，能夠經過漸變背景實現 1px 的 border，實現原理是設置 1px 的漸變背景，50% 有顏色，50% 是透明。

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}


@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}
複製代碼

11.ios與android的標籤表現不一致的問題

ios和android的select標籤還有input[type=」button」]在真機上的樣式會有區別，因此咱們能夠加上這一條css來消除ios和android的樣式差異：

-webkit-appearance: none;
複製代碼

12.巧用flex佈局讓圖片等比縮放

這也是一個小技巧！項目中須要開發swiper輪播圖，那麼你懂的，圖片確定是須要保證等比縮放展現。

<div class="parent">
  <img src="imgSrc" alt="">
</div>
複製代碼

<style>
.parent {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  
  img {
    width :100%;
    height: auto;
  }
}
</style>
複製代碼

結語

OK，大功告成！

以上即是我在最近的移動端項目實戰中的一些經驗總結，但願對各位小夥伴或多或少有些幫助吧！若是有幫助，別吝惜你手上的贊哦~