微信浏览器坑

微信浏览器内核

1 .安卓端

1 qq浏览器X5内核，基于webkit开源引擎优化的浏览器渲染引擎。

2 .苹果端：WKWebView 是替代UI webview而推出的新容器

1 .请求代理:WKBrowsingContextController registerSchemeForCustomProtocol:] 来注册代理 或者说请求代理到一个https地址上
2 .cookie管理:WKWebview与App不互通，是独立存储的，也就是webview的cookie和app的方案是互相隔离的
3 .全面屏适配
4 .webContent 进程崩溃:在 WKWebView 中如果出现 Web 页面发送 sync request，则可导致 WebContent 进程崩溃，WKWebView 回调 webViewWebContentProcessDidTerminate，进而导致页面白屏等问题。此问题可明确是 WebKit 内部的 BUG
5 .如果页面中出现301重定向的情况，可能出现重定向页面无法加载的情况，进而导致页面异常，白屏

二维码问题

1 .同一个页面有俩二维码，长按扫描只会扫出第一个码。
2 .可是区域只出现一个二维码，只有这个解决办法

3 .缩放之后长按二维码无效

二维码最后是以图片呈现给用户的，不要写成背景，不然无法识别触发扫描
//同一张二维码图片
<img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute; " src="二维码图片地址 "> //这张opacity为0隐藏起来,但实际存在且宽为100%,屏幕有多大就多大
<img src="二维码图片地址 " title="qrcode " alt="qrcode "> //这张是呈现给用户看的

viewport-fit解决iphone，刘海和安全区域的问题

1 .https://juejin.cn/post/6963941148163473445 也就是ios 的安全区域
2 .<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, minimum-scale=1, maximum-scale=1.0, user-scalable=0">
3 .底部也在安全区域

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: 50px;  /* 兼容不支持 env( ) 的设备  */
  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */
  padding-left: env(safe-area-inset-left);
}

4 .官网操作

ios端

1 .input 光标高度

1 .input输入框光标，在ios手机上点击输入的时候，光标的高度和父盒子的高度一样
2 .input的高度height和line-height之间用padding-top,padding-bottom隔开

image.png

2 .ios端微信h5页面上下滑动时卡顿，页面缺失。卡顿是遇到过，缺失没有遇到过

1 .ios上下滑动页面时，页面高度超过一屏之之后，出现明显卡顿，页面有部分内容显示不全、
2 .ios 对于overflow-scrolling使用了原生控件来实现，对于使用了overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。移动设备上手动触摸，是否有回弹效果。现在默认的应该是都有缓动吧。
3 .这个bug应该没有了吧
4 .该属性在 iOS UIWebView 中无效。
5 .该属性需与 [overflow](https://www.apiref.com/css-zh/properties/layout/overflow.htm) 属性配合使用，因为必须先定义元素允许滚动，才可以指定它在滚动具有回弹效果
6 .Android 上所有浏览器支持该属性但未实现回弹效果
7 .当一个元素设置过position:absolute或者relative后在加overflow-scrolling:touch,滑动几次之后会卡住，需要给元素添加一个z-index值就可以了
8 .https://blog.csdn.net/WuLex/article/details/105769610 这个应该是最全的

3 .-webkit-box-reflect 移动端支持倒影了

4 .position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘 .需要手动设置scrollTop，