• ios系统web(微信公众号)开发遇到的问题及解决方案


    1.1. 页面滚动不流畅(2017-09-25)

    现象: 
    网页竖向滚动或横向滚动不流畅。

    解决方案: 
    为滚动元素添加css样式:

      -webkit-overflow-scrolling: touch;
    • 1

    详见MDN-webkit-overflow-scrolling

    1.2. 横向滚动时会上下跳动(2017-10-10)

    现象: 
    横向滚动区域,滑动时,会上下跳动。

    解决方案: 
    为滚动元素添加css样式:

      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    • 1
    • 2
    • 3

    2. 点击页面的时候网页闪烁(高亮)(2017-09-25)

    现象: 
    点击页面输入框的时候,网页上半部分闪一下(高亮),体验不好。

    解决方案:

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    • 1

    3. position:absolute元素在页面上看不到了(或absolute元素展示偏右)(2017-09-25)

    现象: 
    某元素设置position:absolute,其他浏览器显示正常,ios和Safari浏览器却看不到该元素(或该元素在页面上比较偏右)。

    解决方案: 
    设置left:xxx;即可。

    4. ios下,iframe页面中的position:fixed定位错误(2017-09-19)

    现象: 
    iOS,iframe中的fixed定位的元素并没有显示在屏幕的固定位置,而是会随着页面的滑动而滑动。 
    解决方案: 
    对滚动部分设置高度。

    详见该文章:ios下,iframe页面中的position:fixed定位布局错误

    5.1. ios下,click有300ms的延迟,click事件无响应(2017-09-25)

    现象: 
    iframe中的网页,点击事件经常无响应。 
    解决方案: 
    使用fastclick插件

    5.2. fastclick插件对输入框(contenteditable)不友善,光标无法移动(2017-09-25)

    现象: 
    使用fastclick后,点击某行文本,可以编辑,但是光标停留在输入框最前面,无法移动光标位置。 
    解决方案: 
    为编辑元素添加needsclick样式类。

    5.3. 添加fastclick插件后,编辑屏幕下半部分的文本,网页没有自动向上移动(2017-09-25)

    现象: 
    正常情况下,点击下半部分的输入框,在ios系统中,网页会自动向上滑动,使输入框暴露在屏幕的上访,方便编辑,但是添加fastclick插件之后,网页经常不再向上移动了。 
    解决方案: 
    暂未解决,求大神解答。 
    为编辑元素及所有后代元素添加needsclick类。(2017-10-10)

    5.4. fastclick对编辑不友善(2017-09-25)

    现象: 
    1. contenteditable的子元素仍有div标签的情况下,光标经常不能自由移动。 
    2. 点击contenteditable的元素,页面经常上下震动。 
    3. 点击编辑屏幕下半部分的文本时,页面不能自动向上移动。

    解决方案: 
    部分页面不再使用fastclick,改为使用贺师俊大神的Zhi库。 
    但仍未解决第三点的问题。
     
    为编辑元素及所有后代元素添加needsclick类。(2017-10-10)

    6. ios输入汉字时出现空格(2017-09-11)

    现象: 
    iOS在输入汉语时,输入多个汉字,在拼音的中间出现了空格。导致正则表达式判断输入不合法,用户输入被迫中止。 
    解决方案: 
    使用s判断空格,认为空格是合法的。 
    详见该文章ios输入汉字时出现空格

    7. iOS输入汉字时,最后选择汉字并没有触发keyup(keydown)事件(2017-10-13)

    现象: 
    input输入框监听用户输入,iOS用户在输入结束后,点击候选汉字时,没有触发keyup(keydown)事件,导致最后的输入无法处理。 
    解决方案: 
    使用input事件处理。input事件可以处理点击候选汉字的操作。

    input的简单介绍MDN-oninput

    致谢

    1. fredshare-移动端前端常见bug及解决方案

    联系我

    如果您有更好的解决方案,或者 
    您有任何疑问或本文侵犯了您的著作权,请联系我。 mail to kylin

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处!<联系方式:kylin_zdd@163.com>
  • 相关阅读:
    SpringMVC使用ResponseEntity实现文件下载,及图片base64的字节数组上传于下载
    File类的createNewFile()和mkdirs() mkdir()
    为什么Java里的Arrays.asList不能用add和remove方法?
    java如何向数组里添加元素
    java里getPath、 getAbsolutePath、getCanonicalPath的区别
    MultipartFile 类
    File类的createNewFile()与createTempFile()的区别
    IntelliJ Idea解决Could not autowire. No beans of 'xxxx' type found的错误提示
    FileInputStream读取的两种方法:逐字节读;以字节数组读取
    JCE cannot authenticate the provider BC
  • 原文地址:https://www.cnblogs.com/clj2017/p/8092984.html
Copyright © 2020-2023  润新知