移动端网页开发问题小结

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

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