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

Posted 2020-10-18 浮生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ios系统web（微信公众号）开发遇到的问题及解决方案相关的知识，希望对你有一定的参考价值。

1.1. 页面滚动不流畅（2017-09-25）

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

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

  -webkit-overflow-scrolling: touch;

现象：
横向滚动区域，滑动时，会上下跳动。

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

  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

现象：
点击页面输入框的时候，网页上半部分闪一下（高亮），体验不好。

解决方案：

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

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

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

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

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

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

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

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

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

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

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

input的简单介绍MDN-oninput

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

以上是关于ios系统web（微信公众号）开发遇到的问题及解决方案的主要内容，如果未能解决你的问题，请参考以下文章