学习笔记（一）——H5移动端

你看我像是会的样子吗？

已于 2023-12-19 15:19:26 修改

阅读量515

点赞数 6

分类专栏： HTML JavaScript Vue.js 文章标签：学习笔记

于 2023-12-15 16:49:05 首次发布

本文链接：https://blog.csdn.net/summer_gf/article/details/135019247

版权

Vue.js 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

本文探讨了H5在移动端开发中遇到的问题，包括H5与原生APP的交互方式（如goModule和JSInterface），以及如何通过viewport-fit和CSS变量兼容手机的刘海屏设计。作者鼓励读者分享解决方案。

摘要由CSDN通过智能技术生成

H5移动端的那些问题

前言

本文主要记录归纳开发过程中移动端遇到的一些问题，解决方法大多从网上学习，如果你有更好的解决方法欢迎评论区交流。

一、H5与APP如何交互

goModule是自己定义跟App端交互的方法，名字自拟，可以传参也可以不传。

/** 获取用户设备型号 */
const userAgent = navigator.userAgent.toLowerCase();
/** 参数 */
const data = {};
/** 苹果 */
if (/(iphone|ipad|ipod|ios|macintosh)/i.test(navigator.userAgent)) {
   window.webkit.messageHandlers.goModule.postMessage(data);
}
/** 安卓 */
if (userAgent.includes('android')) {
   try {
       JSInterface.goModule(JSON.stringify(data));
  	} catch (e) {
     	window.JSInterface.goModule(JSON.stringify(data));
    }
}

二、H5如何兼容手机刘海屏

HTML文件在meta 设置viewport-fit=cover，然后根据自己的布局为DOM添加安全距离。

/** HTML */
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">

/** style 区分安卓和苹果 */

/** 该方法适用于IOS */
/** @supports 特性查询，浏览器是否支持 */
/** constant要在env前面，从低版本开始兼容，top、bottom、left、right */

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
  .dom{
    padding-top:constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }

/** 安卓手机的兼容我选择让app传参给我设置，不然太多机型适配起来太麻烦，如果不传参想方便一些可以写固定值 */
/** 如何获得链接后面的参数自行查询 */
/** 我封装了一个getAllParams方法获取链接后面的参数，拿到之后使用setProperty设置一个属性保存值*/
let params = getAllParams();
document.documentElement.style.setProperty(
        '--android-status-bar-height',
        `${Number(params.aStatusHeight)}px`,
      );

/** 最后在css里面使用var获取属性值 */
.demo{
	 padding-top:var(--android-status-bar-height);
}