一、H5技术的优缺点

1、H5技术的核心优势‌，主要包括了‌跨平台性，‌多设备兼容，‌多媒体丰富，‌交互性强‌，允许web应用在离线时使用本地存储，代码更容易维护和更新，接近原生应用的高性能‌。

2、H5技术也存在了一点缺点，包括了‌安全性问题‌，‌老版本浏览器的兼容性问题‌，处理复杂交互和大量数据时的‌性能问题‌，‌维护和更新成本高，‌搜索引擎优化方面也存在不足。

二、H5网站设计

1、响应式设计

视窗（Viewport）：在移动设备上，视窗（viewport）是一个重要的概念，它决定了页面的显示尺寸和缩放比例。通过设置，可以控制页面在不同设备上的显示效果。

设备像素比（Device Pixel Ratio，dpr）：dpr定义了物理像素和设备独立像素的对应关系，通过JavaScript中的window.devicePixelRatio获取当前设备的dpr，可以在CSS中通过媒体查询针对不同dpr的设备进行样式适配。

rem单位：使用rem单位可以相对根元素的font-size来计算元素的盒模型大小，从而实现不同设备上的等比例缩放。

2、灵活的布局方案

Flex布局：Flex布局是一种现代的布局方式，可以自动调整子元素的宽度和高度以适应父容器的大小，从而实现响应式布局。

栅格系统：利用Bootstrap等框架的栅格系统来处理列表和布局，可以更高效地实现多端适配，栅格系统的基本组成部分包括以下三个主要元素：

Container：用于包裹整个栅格系统的容器，可以分为固定宽度或流体布局（自适应屏幕宽度）。

Row：栅格行，用于包含列元素，并确保列在水平排列时正确对齐。

Col：栅格列，负责实际内容的显示，每一行最多可以包含12列。

3、媒体查询技术

媒体查询：通过CSS中的媒体查询，可以根据不同的屏幕尺寸应用不同的样式，从而实现多端适配。例如，针对小屏设备隐藏侧边栏或调整字体大小，以优化用户体验。

4、图片和资源的适配

自适应图片：使用自适应图片技术，如通过srcset属性为不同分辨率的设备提供不同大小的图片资源，以确保图片在不同设备上都能清晰显示。

图标字体（Iconfont）：使用图标字体（如阿里巴巴矢量图标库）代替传统的图片图标，可以避免因图片尺寸不合适而导致的显示问题。

雪碧图（Sprites）：主要用于把一堆小图标，整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。

三、H5网站开发模式

1、原生开发

原生开发是指直接使用HTML5、CSS3和JavaScript等技术来开发适用于浏览器的应用或游戏。

2、混合开发

混合开发结合了Web技术和原生应用的优势，使用框架（如Cordova、PhoneGap、React Native、UniApp）将H5应用封装成原生应用。

3、框架开发

MVC框架：MVC框架是Model-View-Controller的缩写，是前端开发中最常用的架构模式之一。在H5开发中，MVC框架能够将数据模型、视图和控制器三者分离，使代码结构清晰，便于管理和维护。其中，Model负责数据处理，View负责数据显示，Controller作为桥梁连接Model和View，处理用户交互。

MVVM框架：MVVM是Model-View-ViewModel的缩写，它在MVC的基础上进一步抽象了视图与模型之间的交互。在MVVM框架中，View与Model之间的交互通过ViewModel来进行，ViewModel负责处理用户交互和数据的转换。这种框架模式使得数据绑定更加简单直观，提高了开发效率和代码可维护性。

组件化框架：随着前端工程化的不断发展，组件化开发逐渐成为主流。H5开发中常用的组件化框架有React、Vue等。这些框架提供了丰富的组件库和工具，支持开发者快速构建复杂的单页应用。组件化开发可以提高代码复用性，降低维护成本，并有利于团队协作。

四、APP/H5内部嵌入三方应用的H5实现

在APP安卓端、iOS端、鸿蒙端、H5端的内部，就存在了很多嵌入其他用户端H5网站，实现了免密唤起H5，从而提供更便捷的服务，在APP的安卓、iOS、鸿蒙三端基于WebView的形式嵌入，H5端采用iFrame的形式嵌入。

在实现对接的过程中也遇到了一些技术上的问题，以下主要列举了一些常见问题和在实际开发过程中的解决方案：

1、iOS环境下点击事件无法触发

详细描述：在iOS/Safari环境里H5中非button类型元素（div、span等）绑定click事件，触发不灵敏（有时一次成功、有时需点击多次、甚至失效）。

问题产生原因：浏览器内核之间的兼容区别。

解决方法：给目标元素加一条样式规则，如下图所示

2、Android、iOS端H5网站拍照上传和本地上传图片/文件失败

详细描述：Android、iOS获取相机和读取文件权限授权问题。

解决方法：Android、iOS两端提供读取设备权限的方法。

3、H5中弹窗显示错位问题

详细描述：在H5网站中使用van-popup作为弹窗组件时，其默认渲染层级为文档流，在当前组件内如果存在定位或层级设置时会显示错乱。如图所示：

解决方法：弹出层默认挂载到组件标签所在位置，可以通过 teleport 属性指定挂载位置。

4、爱康H5通过iframe打开H5网站后，点击返回时返回路径有误

详细描述：在爱康H5中，使用iframe打开内嵌的H5网站后，在H5内部的二级页面点击或调起返回时，错误的返回到了爱康H5来源页，而不是H5内部的来源页。

解决方法：给iframe标签中，增加一个自定义的属性，如下图所示，添加key属性用于记录，即可以解决当前的问题。

综上所述，H5网站通过综合运用响应式设计、灵活的布局方案、媒体查询技术、图片及静态资源适配等多种策略，成功实现了多端适配。这些策略不仅提高了开发效率，还能够确保用户在不同设备上都能获得一致且优质的体验。