移动端开发的一些小问题汇总

标签: 移动 开发 问题 | 发表时间:2015-11-17 22:07 | 作者:前端开发编程人员
出处:http://www.iteye.com

原文链接:http://www.gbtags.com/gb/share/9434.htm

 

这几天要做一些模拟app的h5页面给别的app用,有一些很烦人的小问题,这里分享一下。

1:click事件,模拟器上都没问题,但是手机上就是不触发》

也许是为了性能考虑吧,手机上不会去主动的监听click之类的事件,你需要在监听的dom上css,cursor:pointer```

是的,你需要加css,反正我是怎么也想不到会这样···h5的文档也没看全,也许里面有写吧。

具体的解决链接:

http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery

 

2:overflow问题

这是个很复杂,很烦人的东西,即使你给了body一个overflow:hidden; 当有的元素超过了右边框——注意是右边——也会出现滚动条。

这里解决方法有很多种,但是真的要根据具体的情况来定。有时候他对你本身需要滑动的元素是有影响的。等有时间我想详细的研究一下他。

具体的解决方法:

http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers

 

3:你的active伪类不起作用

你的:active伪类做的点击态样式在手机上失效了。

你可以在 body或者需要active的dom上加ontouchstart=""

这样浏览器会把你的dom认为是button,也就会为它加上active了。

当然你也可以用fastclick插件,而且模拟tap,我也推荐用它。

具体的解决方法:

http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari

 

4:min-height的继承问题

这不是一个h5的问题,但是也是在这次中正好遇到的。

你也许会给一个元素一个 min-height,然后你会发现他的子元素在大部分浏览器——而且是现代浏览器——却不能再继承它了。

也就是父子元素都用了min-height:100%,子元素会得不到预期的高度。

你也有很多种解决方法,比如在用min-height:100%的同时加一个 height:1px,或者用js动态的去加。

但是前者当你元素本身存在overflow:hidden的时候,会抵消到滚动条,后者有效率问题,而且会闪一下。

所以我推荐另一种方法,当你不用去顾虑低版本浏览器,比如在h5上面时。

把父元素的display设定为table,子元素的当然是设定为table-cell。 这样子元素就会自动填充满父元素,而父元素你就可以正常的用min-height了。

具体的解决方法:

http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height

 

5:浏览器后退不刷新

这种情况是以前遇到的,这里也再说一下。

主要会发生在webview里多一点。当你点击后退时候,页面是以缓存形式出现的,而不是刷新后的。很多情况下这不是你预期的效果。

解决方法是用js:

window.onpageshow =function(evt){// If persisted then it is in the page cache, force a reload of the page.if(evt.persisted){ document.body.style.display ="none"; location.reload();}};

 onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载。这是他和onload的区别

persisted判断页面是否从缓存中读出,利用这两个属性就可以很好地完成我们的要求。

具体解决方法:

http://stackoverflow.com/questions/7988967/problems-with-page-cache-in-ios-5-safari-when-navigating-back-unload-event-not

 

6:webview中viewport的 width=xxx失效?

第一是要查看webview的设置。是否设置了setUseWideViewPort(true);

第二,如果设置了,就查看你是否用了user-scaleable=0|no,网上说他会和之前说的那个属性有冲突,我试验的结果是设置后 scale会变成1而不是自适应。具体的我也没太深去验证,因为是给别人的app上接入,我不能做太多的试验。

总之如果你发现所有的手机浏览器都好用,但是碰到webview就失效的时候可以尝试一下去掉user-scaleable或者用下面的代码:

var ww =( $(window).width()< window.screen.width )? $(window).width(): window.screen.width;//get proper widthvar mw =480;// min width of sitevar ratio = ww / mw;//calculate ratioif( ww < mw){//smaller than minimum size $('#Viewport').attr('content','initial-scale='+ ratio +', maximum-scale='+ ratio +', minimum-scale='+ ratio +', user-scalable=yes, width='+ ww);}else{//regular size $('#Viewport').attr('content','initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width='+ ww);}

提出user-scaleable问题的:

http://stackoverflow.com/questions/21460623/use-meta-viewport-width-in-android-webview

 提出代码解决方法的:

  http://stackoverflow.com/questions/8735457/scale-fit-mobile-web-content-using-viewport-meta-tag

 

7:touchmove的target不跟着变动?

这也是很早前遇到的问题。

确实是不变动的,和mousemove不同,具体的解决方法:

document.elementFromPoint(event.clientX,event.clientY);

新的方法,查看当前所在坐标所穿过的element。

具体解决方法:

http://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-target-of-touchmove-javascript-event

 

8:兼容ios9的应用跳转方案

在这之前,我们会在iframe中模拟跳转链接,这样就会跳转出去而还留在当前的页面上。而且不会引起页面的任何变化。

但是当ios9以后,对iframe做了一些限制,导致这种最优的方案失效了。

所以我们需要用另一种相对讨巧的方法:

$('a').click(function() { location.href = '自定义 URL scheme'; setTimeout(function() { location.href = '下载页'; }, 250);setTimeout(function() { location.reload(); }, 1000); }

这样做只是为了避免点击确认框,也就是为了不让页面有任何的变化。

具体解决方法:

http://www.tuicool.com/articles/2Qjaay

 

 

以上就是这次做h5的收获啦,下面贴的链接都有较详细的问题描述以及原理解答,下面的讨论也能帮助你更加全面的理解问题。希望遇到问题的同学可以点开来看一下。

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [移动 开发 问题] 推荐:

移动端开发的一些小问题汇总

- - Web前端 - ITeye博客
原文链接:http://www.gbtags.com/gb/share/9434.htm. 这几天要做一些模拟app的h5页面给别的app用,有一些很烦人的小问题,这里分享一下. 1:click事件,模拟器上都没问题,但是手机上就是不触发》. 也许是为了性能考虑吧,手机上不会去主动的监听click之类的事件,你需要在监听的dom上css,cursor:pointer```.

移动端IM开发需要面对的技术问题

- - ITeye博客
这两年多一直从事网易云信 iOS 端 IM SDK的开发,期间不断有兄弟部门的同事和合作伙伴过来问各种技术细节,干脆统一介绍下一个IM APP的方方面面,包括技术选型(包括通讯方式,网络连接方式,协议选择)和常见问题. 分享者:项望烽,毕业于浙江大学,目前是网易云信 iOS 端研发负责人. - 移动端IM开发推荐文章:《.

移动web问题小结

- - Web前端 腾讯AlloyTeam Blog | 愿景: 成为地球卓越的Web团队!
这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. 这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制. 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢.

移动开发那些事

- - 微博UDC
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发. 但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案.

移动开发之总结

- - SegmentFault 最新的文章
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影.

移动安全:android app proguard混淆配置与常见问题

- - Seay's blog 网络安全博客
Java代码编译成二进制class 文件,这个class 文件也可以反编译成源代码 ,除了注释外,原来的code 基本都可以看到. 为了防止重要code 被泄露,我们往往需要混淆(Obfuscation code , 也就是把方法,字段,包和类这些java 元素的名称改成无意义的名称,这样代码结构没有变化,还可以运行,但是想弄懂代码的架构却很难.

移动APP后端网络处理一些问题记录

- - BlogJava-首页技术区
这里讲的移动APP主要指的是安卓平台,大部分情况也适用于IOS等移动平台,可能重点嘛会在后半部分呢. 但凡一个常用的APP都会嵌入至少一个SDK,不同来源或同一来源,有广告SDK,有推送SDK,有性能汇报SDK,有用户跟踪SDK,有统计流量SDK等,有支付SDK等等. 虽然带来了功能的复用和解耦,便于纵向扩展,但可能会存在:.

移动Web轮播图IOS卡顿的问题 - zjzhome

- - 博客园_首页
晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿. 我一看不科学啊,大水果手机怎么会卡顿. 我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是,两个5S,一个IOS7一个IOS8,IOS7基本没有卡顿,IOS8会卡. 我一直觉得轮播不应该会有什么问题,因为我用的是一个库 Swipe,star都有5000多了,应该比较靠谱,捎带推荐一下这个库.

2011 移动平台开发现状

- 山河之外 - 互联网的那点事...
Visionmobile 根据“2011 开发者经济调查报告”(点击这里下载该报告)中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状. 这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web,Symbian,Windows Phone.