zoukankan      html  css  js  c++  java
  • 移动端开发遇到的坑

    现在的前端开发者基本都要同时着手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中的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的值变化事件,替换方案如下:

    [javascript] view plain copy
     
    1. $('#input').bind('input propertychange', function() {  
    2.                 alert("....")  
    3.             });  

    7.给body加position:relative

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

  • 相关阅读:
    Cocos Creator 使用protobufjs
    Java操作MongoDB:连接&增&删&改&查
    MongoDB 权限控制
    SpringBoot 文件上传、下载、设置大小
    Java HashMap 遍历、删除、排序
    Java分割字符串
    在Windows下解决git ERROR: Permission to XXX.git denied to user
    阿里云域名+github建立网站
    Creazy Ideas 智能汽车和智能交通
    Windows上安装运行Hadoop
  • 原文地址:https://www.cnblogs.com/dreamsboy/p/5429628.html
Copyright © 2011-2022 走看看