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

时间:2024-03-02 14:35:43

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>