技術標籤：移動端鍵盤輸入框把底部元素頂上去了

最近在一個移動端的 Web 專案中踩了很多的坑，感覺有必要把它們記錄下來，分享給即將踏入移動端 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在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去除部分機器自帶的效果；

winphone系統,點選標籤產生的灰色半透明背景，能通過設定去掉；

//特殊說明：有些機型去除不了，如小米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下"msapplication-tap-highlight" content=

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.打電話發簡訊

<a href="tel:020-11811922">打電話給:0755-10086a><a href="sms:10086">發簡訊給: 10086a>