论坛首页 Web前端技术论坛

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

浏览 1645 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-11-17  

原文链接: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的收获啦,下面贴的链接都有较详细的问题描述以及原理解答,下面的讨论也能帮助你更加全面的理解问题。希望遇到问题的同学可以点开来看一下。

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics