移动端网页开发问题小结

本人开发嵌套在微信里的网页 ，让这个网页适配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>

若是有人看到这篇文章    也遇到过这样的问题   而且已经解决了  麻烦也告诉我一下 怎么解决的