表单账号密码自动填充

• 设置表单属性为 autocomplete="off" 告诉浏览器不进行自动填充，但浏览器不一定遵守。
• 设置表单属性为 autocomplete="new-password" 通过设置用户新密码的方式避免自动填充，浏览器也不一定遵守。
• 使用 form 表单将密码框与其他 input 框信息进行隔离，可以避免填充。需要注意一些UI组件的表单校验绑定在了 form 标签导致隔离出来的 input 校验无效的问题。
• 设置 input 属性为 readonly，获取焦点的时候再移除该属性

原因： 默认情况下，浏览器会提示用户记住网页上提交的账号密码信息，并且下次访问会默认填充账号密码。浏览器将识别同一个 form 表单里属性为 type=“password” 的 input 框填充密码，与它相近的前一个 input 框填充账号

安全策略限制

• 在请求返回头中设置浏览器安全策略

  # DENY：浏览器拒绝当前页面加载任何 frame 页面
  # SAMEORIGIN：frame 页面的地址只能为同源域名下的页面
  # ALLOW-FROM：origin 为允许 frame 加载的页面地址
  

兼容性

• 判断设备系统

  window.navigator.userAgent
  

• 禁止图片放大（部分Android手机点击图片会放大）

  img{
      pointer-events: none;
  }
  

• 禁止iOS识别长传数字为电话

  <meta name="format-detection" content="telephone=no">
  

• 禁止复制选中文本

  -webkit-user-select: none;
  

• 解决某些情况下对非可点击元素（label,span）监听点击事件，iOS下不会触发

  cursor: pointer;
  

• 解决下拉滚动条卡顿

  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  

localStorage

• Safari 浏览器下 localStorage 跨页签不能实时更新，需要刷新页面才能获取最新的数据

浏览器滚动锚定

• 为了避免在页面加载的过程中，页面内容高度发生变化引起滚动条跳动的问题。
• 开启这个特性后，浏览器会自动触发 scroll 事件，调整滚动条的位置，让滚动条不胡乱跳动。
• 但是懒加载的时候由于不断更新列表项内部的高度，因此就会使浏览器自动触发滚动事件，而滚动事件又触发懒加载的更新，形成死循环，造成自动滚动的问题。- 在父元素中添加 css 属性 overflow-anchor: none; 就正常了。