最近在一個移動端的 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>▼原創系列推薦▼1.JavaScript 重溫系列(22篇全)2.ECMAScript 重溫系列(10篇全)3.JavaScript設計模式 重溫系列(9篇全)4.正則 / 框架 / 算法等 重溫系列(16篇全)5.【匯總】59篇原創系列匯總

你點的每個贊，我都認真當成了喜歡

總結

以上是生活随笔為你收集整理的miniui页面移动的时候透明_【H5】316 移动端H5跳坑指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。