ios微信端網站遇到的問題
最近的一個項目，在測試ios時遇上了一些問題：
1.給div、span等元素綁定的點擊事件無效
2.表單輸入時整個頁面白屏
3.readonly的元素出現光標（iphon5/ ios8.0）
第一條：給div、span（或非 a,input,button）等元素綁定的點擊事件不起作用
| 1 2 3 4 5 6 7 8 |
$("body").on(‘click‘, ‘.mask‘, function(event) {
event.preventDefault();
hideStatus(‘.pos-status‘);
if($(‘.protocal‘).is(‘:visible‘)){
hideStatus(".protocal");
}
});
|
其中，mask是遮罩層，要實現的功能是：點擊遮罩，隱藏彈窗。
在安卓上測試正常，但在ios中（只測了iphone6及以下），並沒有什麽用。
最終的解決方案是 給mask添加 cursor:pointer。
置於為什麽 cursor:pointer 能解決這個問題…
並沒有找到答案，但是找到了解決這個問題的其它方案和更具體的問題描述：
問題描述：
當使用委托給一個元素添加click事件時，如果事件是委托到 document 或 body 上，並且委托的元素是默認不可點擊的（如 div, span 等），此時 click
解決方案：
- 將
click事件直接綁定到目標元素（即.target）上 - 將目標元素換成
<a>或者button等可點擊的元素 - 將
click事件委托到非document或body的父級元素上 - 給目標元素加一條樣式規則
cursor: pointer;
總結：推測在 safari 中，不可點擊的元素的點擊事件不會冒泡到父級元素。通過添加 cursor: pointer 使得元素變成了可點擊的了。
引用自: https://happycoder.net/solve-ios-safari-click-event-bug
第二條：表單輸入時整個頁面白屏（只測了iphone6及以下）
出問題的頁面上包含了6條以上的表單元素（不確定是否與數量、結構有關），同樣的頁面在安卓上正常，在ios中出現如下情況
| 1 2 3 4 5 6 |
<div class="form-item">
<i class="icon icon-pos"></i>
<div class="item-btn">
<input type="text" name="address" class="form-text fix-addr" placeholder="請輸入詳細地址">
</div>
</div>
|
解決方案：給 item-btn 添加 position:relative；
第三條：readonly的元素出現光標（iphone5）
設置input為 readonly 出現了光標，在iphone5/ios8.0出現光標，（未測iphone5以下）
(pc端IE也有同樣的問題，通過添加 unselectable=”on” 解決。 -webkit-user-select=none ,-moz-user-select=none )
解決方案：
1 1、input onfocus=”this.blur();” 2 3 2、$(document).on(‘focus’, ‘input[readonly]’, function () { 4 this.blur(); 5 });
(或設置為 disabled,但有 disabled 的元素不會提交，所以表單提交前要手動清除disabled）
此外transform在 iphone5失效
解決方案：
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
補充：
在ios中，使用fixed將元素固定在窗口底部時，如果document的高度（可通過chome f12審察元素查看）小於整個屏幕的高度，隨著頁面的上拉會出現底部顯示不全或無法顯示的現象。解決方案是讓文檔的高度100%。
ios微信端網站遇到的問題