MyException - 我的异常网
当前位置:我的异常网» 操作系统 » ios微信端网站遇到的有关问题

ios微信端网站遇到的有关问题

www.MyException.Cn  网友分享于:2013-08-14  浏览:0次
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 上,并且委托的元素是默认不可点击的(如 divspan 等),此时 click 事件会失效。

解决方案:

  1. 将 click 事件直接绑定到目标元素(即 .target)上
  2. 将目标元素换成 <a> 或者 button 等可点击的元素
  3. 将 click 事件委托到非 document 或 body 的父级元素上
  4. 给目标元素加一条样式规则 cursor: pointer;

总结:推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

引用自: https://happycoder.net/solve-ios-safari-click-event-bug

第二条:表单输入时整个页面白屏(只测了iphone6及以下)

出问题的页面上包含了6条以上的表单元素(不确定是否与数量、结构有关),同样的页面在安卓上正常,在ios中出现如下情况

1714163709180sqd

 

1
2
3
4
5
6
&lt;div class="form-item"&gt;
&lt;i class="icon icon-pos"&gt;&lt;/i&gt;
&lt;div class="item-btn"&gt;
&lt;input type="text" name="address" class="form-text fix-addr" placeholder="请输入详细地址"&gt;
&lt;/div&gt;
&lt;/div&gt;

解决方案:给 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%。

文章评论

要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
代码女神横空出世
代码女神横空出世
那些争议最大的编程观点
那些争议最大的编程观点
老程序员的下场
老程序员的下场
一个程序员的时间管理
一个程序员的时间管理
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
编程语言是女人
编程语言是女人
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员必看的十大电影
程序员必看的十大电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为什么程序员都是夜猫子
为什么程序员都是夜猫子
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
10个调试和排错的小建议
10个调试和排错的小建议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员都该阅读的书
程序员都该阅读的书
程序员和编码员之间的区别
程序员和编码员之间的区别
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
总结2014中国互联网十大段子
总结2014中国互联网十大段子
每天工作4小时的程序员
每天工作4小时的程序员
程序员的鄙视链
程序员的鄙视链
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我是如何打败拖延症的
我是如何打败拖延症的
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
鲜为人知的编程真相
鲜为人知的编程真相
我的丈夫是个程序员
我的丈夫是个程序员
如何成为一名黑客
如何成为一名黑客
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有