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

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