caoweiju
caoweiju

web开发常见问题[持续更新中]

前记

平时在写bug的时候慢慢的就会有了一些避开bug的经验，慢慢的记录下来，避免自己一次次的踩进去。

技术问题

  1. hybrid开发中，安卓手机上小于12px字体的垂直居中不对齐问题，可以通过内边距padding来折中处理【可能是安卓上的webview实现有关系】
  2. 无线端1px处理的边框被隐藏问题，主要是父元素的overflow:hidden引起的【通过伪元素after根据prd放大缩小实现】
  3. 无线端搜索框使用form的onsumbit监听search类型的input的enter事件，最后不要通过keycode等方式来监听enter；
  4. scheme跳转问题：包括url中文没有encodeURIComponent、没有写全https:而是用//,
  5. 关于微信分享的问题：分享文字内容敏感、分享了短链接，而短链接没有配置服务域名等会有问题；
  6. 在jquery的onclick的回调事件传入匿名箭头函数，并使用this会导致问题。
  7. 处理当前页面url参数的时候没有考虑url上具有hash的情况，可能会导致参数追加到了hash上，或者获取最后一个参数时同时获取了hash内容。
  8. ::-webkit-scrollbar{ display: none;} 隐藏滚动条 和 -webkit-overflow-scrolling: touch启动弹性滚动 【在app端没有同时生效】
  9. postcss处理多行截断文本时会丢去其中一个属性display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2;也就是其中的 -webkit-box-orient: vertical; 需要添加/* autoprefixer: off */来避免被处理
  10. 点击穿透，当原生click事件和fastclick事件混用时，如果fastclick事件触及点发生了dom元素的变更[遮罩层的隐藏等]，会导致300ms后的click落在了变化后的dom上，引起诡异的问题。
  11. 折叠屏不能仅通过监听resize事件来做重新的展示，因为在一些浏览器微信环境中滚动的页面会时的环境的导航条隐藏，出发resize，可以同时判断视口宽度是否变化。
  12. 全局滚动位置设置的时候document.body.scrolltop 和 document.documentelement.scrolltop 在不同的环境分别起作用，最好的办法是先设置其中一个，然后读取设置的值，如果没有设置成功的话再设置另一个。
  13. + new Date()和0+ new Date()的问题
  14. 关于伪假 0、 [].length等会被react渲染
  15. 滚动穿透问题，当使用全局滚动时，如果有弹窗内容，并且弹窗内容也可以滚动，那么弹窗内容滚动到边界时就会穿透到全局，引起全局范围的对应方向的滚动。处理的话需要在弹窗时将全局滚动失效，并记录当前滚动位置，在关闭弹窗时，恢复全局滚动以为文档滚动位置还原。
  16. 视频字段播放的问题注意点：需要注意兼容性和微信设置非全屏播放，以及在app进入后台时或者新开webview时需要暂停视频播放

  17. 在ios系统中，window ，html，document，body绑定click事件，并且代理元素是不可点击元素（如div span等）的话，事件不会触发。但是如果是可点击元素（如button,a）的话，点击事件正常。

    1. 将 click 事件直接绑定到目标元素(即 .target ) 上
    2. 将目标元素换成 或者
    3. 给目标元素添加一个空的 onclick=""(
      点击我!
      )
    4. 把 click 改成 touchend 或 touchstart（注意加上preventDefault）
    5. 将 click 元素委托到非 document 和非 body 的父级元素上
    6. 给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)

  18. 关于h5页面的软键盘和输入框的问题：

    1. 在IOS上软键盘的弹起表现：输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview）并没有被压缩，或者高度（height）没有改变，只是页面（webview）整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度，如果元素滚动的高度不够的时候【1. 自动添加空白占位(软键盘收起后可能还存在，需要滚动一小段来收起) 2. 滚动到底(输入框可能被遮挡)】。
    2. 在 Android 上软键盘的弹起表现：，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动，webview 本身不能滚动。
    3. 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。
    4. 触发输入框以外的区域时，输入框失去焦点，软键盘收起。但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，不过软键盘会被收起。
    5. 第三方的输入法存在高度不一致或者有导航头也会存在遮挡问题。

    6. 选择合理的布局，比如flex布局，以及监听软键盘的弹起：

      • 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur 事件获知软键盘收起。
      • 在 Android 上，监听 webview 高度会变化超过软键盘高度(因为很多浏览器在页面滚动时会隐藏导航栏导致触发resize事件，所以需要小心使用resize)，高度变小获知软键盘弹起，否则软键盘收起。

  19. 关于input等表单的disabled和readonly两个属性的区别：

    1. 不是所有具有disabled属性的表单元素都具有readonly属性，