h5开发
wǎng luò shí huāng 2021-06-24
h5
适配
iPhoneX适配
收集了一些 h5 开发过程总遇到的问题
# 整体页面适配方案：
html，body 高度设置 100%；box-sizing: border-box;
body 里写一个 div（class 为 outer）；高度 100%；display:flex;flex-direction: column;
底部导航放在 class 为 outer 的 div 里，并且有一个外壳，高度为导航栏高度；外壳里面写内容高度继承即可。页面内容用一个 div 和 class 为 outer 的 div 为兄弟关系，并且 flex：1。
注意：不要用 100vh 写 class 为 outer 的高度，在不同手机或者浏览器 100vh 不是我们想要的值。
具体参考，自己写好的架子：https://github.com/HelenTim/appLayout/blob/master/base-fram-html5.html
我们可以通过结合 transform：scale(xx) 页面内容的的方式去适配
- 比如页面的头部和顶部的适配方式与页面主要内容适配方式并不一样时（如果采用和前者一样的适配方式并不科学），页面主要内容我们就可以使用这种方式去适配。
ios 刘海肯下巴适配：
- https://juejin.cn/post/6844903974491930637
安卓话，如果页面在 webview 里面（直接让安卓自己调用设备设置值最靠谱），那么参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/env 在 Android 的 WebView 中，如果你想要设置 safe-area-inset-bottom，你可以通过 WebView 的 WebChromeClient 来实现。你需要覆盖 onSafeBrowsingHit 方法，并在需要时调用 JavaScript 代码来设置安全区域的底部边距。以下是一个简单的示例代码：
public class MyWebChromeClient extends WebChromeClient { @Override public void onSafeBrowsingHit(WebView view, WebResourceRequest request, int threatType, final Uri referrer) { // 在主线程中更新安全区域的底部边距 view.post(new Runnable() { @Override public void run() { // 注入JavaScript代码来设置safe-area-inset-bottom view.evaluateJavascript("javascript:(function() { " + "var meta = document.createElement('meta'); " + "meta.setAttribute('name', 'safe-area-inset-bottom'); " + "meta.setAttribute('content', '10px'); " + // 假设10px是底部安全区域的边距 "document.head.appendChild(meta);" + "})();", null); } }); } } // 在WebView设置中使用自定义的WebChromeClient WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebChromeClient(new MyWebChromeClient()); // 或者参考：https://github.com/ionic-team/capacitor/discussions/64561
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24h5 适配刘海：
- https://juejin.cn/post/7250288616533213221
- 浏览器的话是不用考虑刘海高度的自行适配了，webview 的话可以让 app 开发人员直接控制 webview 显示的区域此时就不用前端操心了或者按照上面方法传入刘海和下巴高度。
# 滚动穿透问题
- 原因以及解决办法 (opens new window)
- 参考代码在：https://github.com/Jiavan/blog/tree/master/src/demo/scroll-chaining (opens new window)
- 函数已经放在码云：https://gitee.com/wangluoshihuang/cssReset/blob/master/fuckScrollChaining,js (opens new window)
# H5 页面- iPhoneX 刘海屏适配：
- https://mp.weixin.qq.com/s/stCsdZMcPiz_EzB99iNgyg (opens new window)
- https://segmentfault.com/a/1190000020887571 (opens new window)
- https://blog.csdn.net/weixin_40008566/article/details/111275542 (opens new window)
# 移动端必备的 H5 问题及解决方案：
# 开发 h5| Hybrid | 微信小程序 ｜ 实践踩坑总结十六条
# 移动端 H5 开发的屏幕、图像、字体与布局的兼容适配：
- https://mp.weixin.qq.com/s/f1KJI20_rFK91ol89N7ZOg
# 40 条移动端 H5 坑位指南：
# 在 ios 上想让页面没有回弹的效果
- html，body 声明
height:100%，然后再 body 里面放置一个子容器元素（高度也为 100%，overflow:auto 即可），页面所有的内容放在这里面即可。
# input 防止被键盘遮挡解决方案
- 参考这里的 (opens new window)【最终解决方案】
# 40 条移动端 H5 坑位指南
# 移动端返回到上一个新的页面时不会触发此页面的 js 执行：
- 使用 window 的 pageshow 事件即可。
# 移动端有时候发现在 ios 端很难上下滚动
- 我们可以设置 html body 高度为 100%； over-y:auto 即可。
# 禁止移动端自动播放视频时自动全屏
video 属性加上以下东西：x5-video-player-type="h5-page" x5-video-orientation="landscape|portrait" webkit-playsinline="true" playsinline="true"
- 页面如果在 webview 内，iso 这样设置依然会失效，需要在 Obj-C 里设置（属于 ios 开发的工作）：webview.allowsInlineMediaPlayback = YES
// 我们写video标签时，直接使用以下写法： <video controls controlslist="nodownload" class="video swiper-slide" preload="metadata" // 只预加载第一帧 muted src="" poster="" x5-video-player-type="h5" x5-video-orientation="landscape|portrait" webkit-playsInline playsinline > </video>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 禁止 iso 在 h5 上视频自动全屏播放
- https://blog.csdn.net/jugtba/article/details/132031855
# 吃透移动端 1px ｜从基本原理到开源解决方案
- https://juejin.cn/post/6844904023145857038
# 吃透移动端 H5 响应式布局 ｜深入原理到目前最佳实践方案
- https://juejin.cn/post/6844904021552005128
- 截图 (opens new window)
- 里面有 less 写了一个计算 rem 值的函数可取
# 3 分钟搞懂 FastClick 原理解析
- https://segmentfault.com/a/1190000023617219
# 总结 12 个常见移动端 H5 与 Hybrid 开发问题
- https://mp.weixin.qq.com/s/KD5OQjbcw7B1zp32I0j_Fw
# Hybrid App 应用开发中 5 个必备知识点复习
- https://juejin.cn/post/6844903875414065165
- 截图 (opens new window)
- 其中讲了 js 和原生应用的通讯原理（JSBridge 的原理）
# Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等)
- https://juejin.cn/post/6844903888735174670#heading-27
# 安卓微信自带浏览器
- 上传文件多选时，无法触发 change 事件
- 解决办法是： input 属性写上 accept="image/,video/" 。此时 change 事件可以触发；图片可以批量选择；但是在安卓上此时无法同时选择视频和图片，视屏也无法批量选择。
# 视频导致交互卡顿
- 在移动端，轮播里放入视频，在不同浏览器里会非常卡。解决方案是轮播里放图片，点击时单独弹窗播放视频。并且不同浏览器，video 标签层级还不能百分之白可以被控制，因为有的浏览器默认使用系统的 video 组件此时层级无法被前端控制。
# 视频无法自动播放
- 移动端如果没有用户交互比如点击之类的交互，那么视频无法自动播放。
# video 在 ios 上会出现白边
/** h5在iso上视屏有白边，使用以下方法解决。假如我们给video设置背景颜色为rgba(0, 0, 0, 0.4|),那么-webkit-focus-ring-color的颜色也设置为一样的值 */ video { outline: -webkit-focus-ring-color rgba(0, 0, 0, 0.4) 0px !important; }1
2
3
4
5
6# video 在 h5 中
- 阻止视频在移动端页面中全屏播放：https://www.jianshu.com/p/8c17967adee7
- 只是阻止全屏播放的话，上面有介绍，这里感觉台复杂了。但讲了很多属性。
- https://juejin.cn/post/7234449760338034744
- 解决 ios 内视屏无法显示第一帧问题，video 使用 poster 属性即可
- 阻止视频在移动端页面中全屏播放：https://www.jianshu.com/p/8c17967adee7
