移动端开发遇到的坑

àì夳堔傛蜴生んèń 2022-06-15 22:51 229阅读 0赞

现在的[前端开发][Link 1]者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在[Android][]端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是“大坑”，下面是本人自己开发手机页面过程中总结的一些问题，避免以后再次去犯。

1.overflow-x

这真的是一个大坑，一旦你在body或者html上用了这个属性，对不起，如果你的页面出现滚动条的话，那就会出现莫名其妙的bug，滑动页面的时候fix在顶部或者底部的会挡住，不知道有人遇到这样的情况没有，我是遇到了，坑死了。（当然原因还不知道，有知道的望赐教）

解决办法：html跟body不要使用这个属性，如果不想让横向出现滚动，就用overflow:hidden;overflow-y:auto;

2.calc()

这个本就是css3中的新方法，用起来其实是很爽的，无奈android不支持，大家最好别用，除非你不考虑android用户。

3.display:fix

这个是css3的新属性，用来做弹性布局的，[iOS][]上是十分OK的，然而android不支持，为了不被坑，别用。

4.-webkit-overflow-scrolling:touch

这个属性不是坑，他是用来让ios上的滚动条更加顺滑流畅的，亲测android上没有啥大的变化，但是ios有，不算坑，为了增强用户体验，大家可以用上，给出现滚动条的标签加上这个样式。

5.[jQuery][Link 1]中的html()方法

如果input的type为tel类型，然后你用html()方法取出某个值填入这个input，这个input在android手机上会显示诸如”<a href="faketel:\*\*\*\*"></a>“类似的字符窜，解决办法就是用text()方法去取这个值然后填入这个input中，说白了还是html()跟text()方法的用法不一样，html()方法取的是html的内容，并非是纯文本，而text()方法取出的是纯文本，不会被浏览器解析，算是一个教训！

先暂时总结这些吧，以后再慢慢加上！

6.keyup和keydown在IOS设备上失效

如果你在IOS设备上用第三方输入法是无法用keyup事件来监听的，因为ios系统做了屏蔽机制，第三方输入法的事件系统是不管的，那么我们可以换种思路，去监听input的值变化事件，替换方案如下：

1.  $('\#input').bind('input propertychange', **function() \{  **
2.                  alert("....")  
3.              \});

7.给body加position:relative

比如给移动页面做个弹幕的效果，在body里面会有个div一直滚动，从右向左，然后这个div是absolulte的，那一定要给body加relative，否则ios的手机会出现横向滚动条

[Link 1]: http://lib.csdn.net/base/22
[Android]: http://lib.csdn.net/base/15
[iOS]: http://lib.csdn.net/base/1