移動端網頁開發問題小結

本人開發嵌套在微信裏的網頁 ，讓這個網頁適配IOS的時候遇到的問題：

1，在IOS裏 過長的一串  數字 它會自動給識別成手機號碼  要是一不當心觸碰到 就會打電話  這個就用一個標籤就能夠解決

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

2，input輸入框  type=number 低版本的手機 或者有些IOS手機 瀏覽器  placeholder 失效

這個時候若是你只是想用來 輸入數字的話  能夠用 type= tel

還有些時候maxlength  失效   這個我是用js  控制的

3，IOS的綁定click  事件  失效

但它並非所有都失效  有一些按鈕綁定click  事件 就是能夠的

有些Click  事件失效  只要把這個加上cursor：poiner  就能夠

網上有人說用touch  事件 可是這個事件也很差使 他會有穿透

還有人說用e.preventDefault();  這個我也試過 沒有起什麼做用

 

問題描述

我當時遇到的問題是這樣有一個頁面a.html  點擊這個頁面的任何一個部分 均可以跳轉到b.html  頁面  b.html  頁面有兩個 輸入框

首先我給body綁定一個click 事件  可是IOS 不能觸發  因此就用了 touchend 事件  可是這個有穿透力

若是你點擊a頁面上與b頁面那兩輸入框相同的位置 跳轉到b頁面時  那個輸入框 就會自動focus  這樣 就觸發了 我寫的輸入框的事件可是我不想這樣

最後這個問題啊我也沒有解決

雖然touch  事件IOS  能夠識別 可是還有別的問題  隨意不是最好的解決方案

最後我用了a 標籤 跳轉頁面

 

4.position：fixed  失效 

當手機鍵盤彈出的時候  若是有彈框的話  彈框就會 彈來彈去 位置會變更

因此 看到有人事這樣解決的  我試了一下 確實好使

彈框定位爲position:absoulute

包含彈框的 加上這個

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

例如：

<div class="mask">

　　<div class="alertBox"></div>

</div> 

<style>

.mask{overflow-y: scroll;
-webkit-overflow-scrolling: touch;}

.alertBox{position:absolute}

</style>

若是有人看到這篇文章    也遇到過這樣的問題   而且已經解決了  麻煩也告訴我一下 怎麼解決的