原文链接: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; 当有的元素超过了右边框——注意是右边——也会出现滚动条。
这里解决方法有很多种,但是真的要根据具体的情况来定。有时候他对你本身需要滑动的元素是有影响的。等有时间我想详细的研究一下他。
具体的解决方法:
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了。
具体的解决方法:
5:浏览器后退不刷新
这种情况是以前遇到的,这里也再说一下。
主要会发生在webview里多一点。当你点击后退时候,页面是以缓存形式出现的,而不是刷新后的。很多情况下这不是你预期的效果。
解决方法是用js:
onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载。这是他和onload的区别
persisted判断页面是否从缓存中读出,利用这两个属性就可以很好地完成我们的要求。
具体解决方法:
6:webview中viewport的 width=xxx失效?
第一是要查看webview的设置。是否设置了setUseWideViewPort(true);
第二,如果设置了,就查看你是否用了user-scaleable=0|no,网上说他会和之前说的那个属性有冲突,我试验的结果是设置后 scale会变成1而不是自适应。具体的我也没太深去验证,因为是给别人的app上接入,我不能做太多的试验。
总之如果你发现所有的手机浏览器都好用,但是碰到webview就失效的时候可以尝试一下去掉user-scaleable或者用下面的代码:
提出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不同,具体的解决方法:
新的方法,查看当前所在坐标所穿过的element。
具体解决方法:
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的收获啦,下面贴的链接都有较详细的问题描述以及原理解答,下面的讨论也能帮助你更加全面的理解问题。希望遇到问题的同学可以点开来看一下。