网站移动版本开发踩坑实录三



鉴于本人在移动wap上的开发经验少,遇到的问题确实不少,很多问题都是为了项目紧急上线而不得已的写临时性的fixed的方案,所以解决方法也存在缺陷,这次记录的虽然没有什么高大上的东西,把几个明显的问题和解决过程记录下来。

1、ios系统浏览器事件会触发两次

问题发现于ipad、iphone上,起初遇到这个问题本以为自己在绑定了两次事件(touchstart click),但是由于最新的ipad对click事件不支持以及为了防止重复绑定事件,因此我特意处理了关于touchstart和click做了一个统一的处理,看过事件绑定以后我就想着是不是我触发了两次呢,然后我跟踪代码发现确实触发了两次,google一下:click event call twice in ipad 发现还真有类似的情况,http://stackoverflow.com/questions/4569869/jquery-click-event-is-called-twice-on-ipad ; 无奈啊。看着处理方式是unbind然后在bind这样每次都要将点击相关的事件做这种处理,先不管效率如何,单纯的反复绑定就不是很习惯。然后我继而找了fastclick 的插件,大概看了一下源代码,通过touch.identifier === this.lastTouchIdentifier 最后一次touch标识判断是否是重复调用(我没有那么高深,以前没注意过).起初我想靠这种方式解决我们的问题,之前也说过我们wap上用的是zepto,而如果引入fastclick意味着点击相关的事件绑定要移到fastclick相关,而dom选择和操作都要zepto需要两套,因此我决定放弃。被逼无奈我想到了一种方式就是dom锁,即dom点击触发以后锁定dom,让dom 1s 之内不反复调用,从而第二次touchend就不会触发业务代码。

2、android平台遮罩层下的input、select、a等元素可以被点击和focus

问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看。首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus、click、change.这个问题着实棘手啊,记不得怎么查的了,最后找到https://code.google.com/p/android/issues/detail?id=6721 ,据了解3.0以下都会受到影响,在我测试的小米手机上怎么也不会出现这个问题。在查看bug报告list以后,找到了两种解决方案,第一是通过层显示以后加入对应的class名控制,第二是通过将可获取焦点元素加入的disabled属性,于是我采用了第二种方案,就因为我更喜欢js控制他们,当然由于浮沉下不仅用可获取焦点的元素还有a这类的链接和用a模拟的button,所有在不可用disabled控制的元素一律加入永久锁定,然后浮层隐藏或关闭后取消锁定(其实只有我管这种通过data属性确定是否触发dom业务的代码加锁而已),然后幸运的测试通过了。

3、android平台下获取光标的input在上下滚动的时候位于在fixed元素上

问题依旧发现在三星自带浏览器上,获取焦点的input通过在上下滚动的时候input focus 呈现在fixed的层上,这个确实很让我郁闷, 三星不但在横屏调起时我各种苦恼,还出现很多恶心的事情,在网上找一种解决方案就是input获取焦点以后去掉fixed,因此在还没有事件代码之前我yy了一下,当页面input获取焦点以后将fixed的层变为static,然后页面滚动的时候判断docuemnt.activeelement 是否是input或是select等可输入和选择的元素,如果时继续去掉fixed,不是则还原fixed。然后在这些元素blur以后还原fixed(貌似scroll看起来没意义啊)

4、ipad上从一个输入框获取焦点的状态切换到另一个遮罩层的input框时,高度计算有问题

只发现在ipad上,iphone上没有,这个我只看到效果,还没有对应测试具体代码

5、微信自带浏览器获取视窗高度和可操作高度不一致的问题

需求是弹出搜索层时计算视窗高度动态控制可显示区域和滑动处理,问题源自于站点嵌入到微信以后,通过自带浏览器打开网站,$(window).height()获取的高度比实际可操作高度大(怀疑是微信上有个壳,壳上有一个可操作菜单),虽然没有把测试代码部署实际测试一下,紧迫的项目进度催促下,只能通过agent判断是来自于微信,将实际获取高度减去100

6、select-option的展现行为

如果让你隐藏一个元素,直观的第一想法一定是element{dislay:none};嗯,那么在select的option上display貌似就不那么奏效了,考虑到在wap上根据特定条件展现下拉框中的内容,我很自然的应用了display,在模拟器里测试没有问题,然后我就特别放心的放到测试版本里面。手机上看了一眼,我擦竟然没有隐藏。看到这里有解决办法: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css 。虽然我没有亲测,但是在chrome下option display:none 没有问题。

7、ios平台转屏页面紊乱问题

问题发现于ipad上,当页面反复旋转的时候自适应的页面出现紊乱,如下图

很蹊跷就是当没有调起键盘的时候页面旋转正常,只有调起键盘再旋转的时候就乱了, 先不管是否调起键盘,据我分析一定是旋转以后重绘那里出了问题了,因此找了一下对应的解决方案, http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac 基本上就是旋转触发的时候重绘一下,然后通过hide.show去达到页面区域重绘(不过设置为0貌似没有通过)。

8、ipad上safari历史记录后退页面布局混乱

这个问题出现于safari上(ios平台会出现),数据提交html更改了或是页面产生动画这类的行为,至于其他浏览器我没测试过,问题归结于回退到上一步的时候使用的html cache,记录了跳转到下一个页面的html,所以回退回来以后页面出现页面絮乱(忘记截图了),因此这样子只能出大招了,如果判断页面是通过回退过来的就强制刷新页面,如何处理在这里http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked ,补上一篇ff的文档https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching

网站移动版本开发踩坑实录三

时间: 2024-10-31 00:30:10

网站移动版本开发踩坑实录三的相关文章

网站移动版本开发踩坑实录一

最近公司项目需要开始做wap版本开发,虽然在上一家公司也有做过类似的工作,由于当时公司产品没有严格要求适配各个移动设备,也并没有很多动作效果和图片自适应这类的效果,相对来说体系没有那么成熟,更多是在wap版本上可以用就ok了(其实更多的工作集中在功能和cssser身上,交互效果没有那么强,唯一做的好玩一点的工作是菜单滑动.图片缩放[未被上线过]),因此基本上没有在移动端踩各种坑:说了这么多上一家公司的wap版本,下面开始讲讲现在做的项目让我在wap版本上踩的各种坑开始说起.   第一坑:技术选型

网站移动版本开发踩坑实录四

前戏:晕晕乎乎正在瞌睡中,测试妹纸拿来一个ipad,开着微博,打开了站点说你看,微博自带浏览器点击放大以后网页没有自适应啊(网站由于有图片神马的,全站图片要自适应各种移动设备),我惊醒,心想我草这是啥功能, 我这种木有ipad的人什么时候看见过这个功能. 好吧既然出问题了,就开始想想吧---继续昏迷10分钟.... 开始:拿着ipad上大概看了一下,当微博打开的时候,其实页面还是有一点冗余的空白宽度,既然做了一个80%(估计)的可视展示区域,但是还是能有用移动留出空白,然后点击放大,页面平铺这个

JAVA实用案例之文件导出(JasperReport踩坑实录)

写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小Demo,JAVA实用案例之文件导入导出(POI方式). 虽然简单,但是企业应用的原理基本上也就是这样,只不过是封装的更好些,不像我之前写的那样每个Cell都需要定义,其实poi的方式也是我目前最推崇的方式之一了.主要原因是jxl不支持xlsx,Jaspe

Android 10 踩坑实录 👉 2020-01-20

1.https联网限制 Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setUseSessionTickets(Z)V (light greylist, reflection) Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setHostname(Ljava/lang/String;)V (light g

Spring Boot 开发系列一 开发踩坑

这是学习spring boot 的第二周,公司号称这玩意是啥都不会的新手就可以填空开发,于是决定上手一把,怎么说我也是搞了快七八年的.NET和.NETcore,没想到无情打脸,快被这个能填空开的IDE搞疯了,下面是记下一些自己踩坑开发中遇到的一系列无穷无尽的问题. 一 .集成MyBatis a)首先如何理解这个  MyBatis 的东西,我的理解是 :MyBatis 有点类似ORM的感觉,跟 JPA很类似,就是一个orm,需要一个类似 dbcontext的东西,这个东西,在MyBatis 里面叫

Oracle DBLink跨数据库访问SQL server数据同步 踩坑实录

项目需求:这里暂且叫A公司吧,A公司有一套人事管理软件,需要与我们公司的软件做人员信息同步,A公司用的是SQL server数据库,我们公司用的Oracle,接口都不会开发(一万句"fuck you"),就单单给我们公司提供了一个SQL server的账户和密码,还有一个视图.后来百度一番,可以通过DBLink跨数据库访问,然后做数据信息同步功能. 安装过程中,踩了不少的坑,需要配置很多的东西,QQ群里也请教不少人,都很少人听说还有这玩意,现在做数据对接,都是走到接口,传JSON字符串

(最新)VS2015安装以及卸载过程——踩坑实录

前言Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序,也可以用来创建网络服务.智能设备应用程序和 Office 插件,目前还可开发安卓平台应用及IOS平台应用.由于本人是做视频编码的,跑实验都是用C语言,而VS系列是对C语言最友好的编程工具.因为,我花了整整一天时间在安

Visual Studio For MacOS .NetCore开发踩坑记

自从Visual Studio For  MacOS公布以来,就开始尝试在Mac上进行net core开发.断断续续遇到了各种奇奇怪怪的问题.虽然大部分利用google查查(百度屁都查不出来),都能找到解决方案,但还是做个记录吧~ 问题一: 错误提示:error MSB4057: The target "Build" does not exist in the project 记录时间:2017-03-31 原因解析:Mono版本低了.对,就是Mono版本低了,别问我为什么开发netc

前端学习---移动端vue开发踩坑记

前言: 大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue.这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项.vue开发遇到的一些问题.本文的目的是为了在以后的开发中我们可以避免这些坑,提高我们的开发效率. 一.移动端开发特有问题: 1.移动端样式的兼容性: 在当前移动端的开发要面对各种不同的手机,不同的手机DPI也是不同的,比如Iphone 8的DPI就是2,Iphone 8P的DPI就是3.为了让页面可以兼容不同