本人开发嵌套在微信里的网页 ,让这个网页适配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>
如果有人看到这篇文章 也遇到过这样的问题 并且已经解决了 麻烦也告诉我一下 怎么解决的