为什么是第三章，前面两章呢？原本是以碎片化的方式将HarmonyOS应用开发快速掌握，但是在准备六大布局组合复杂UI界面Demo时，很多组件之前都没有应用。因此准备将知识体系进行细化，以章节的形式希望能够将整个HarmonyOS应用开发简单化，降低学习复杂度。为什么是从第三章开始？因为前两章是一些理论性的知识，后续会抽时间整理发文。1、本章主要内容一款优秀的app，不仅仅在于它提供的业务功能，还要
转载
2024-09-18 11:19:56
273阅读
px：是分辨率的尺寸单位 em：相对于父元素 rem：相对于HTML根元素 vw：视口宽度的 1/100，vh：视口高度的 1/100rem结合js实现适配新建rem.js方法，在main.js引用该方法// 设置 rem 函数
const baseSize = 32;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己
转载
2024-09-12 03:44:03
97阅读
前言
长屏适配
单页适配
参考
前言 曾经屏幕适配一直是个头疼的问题，各种坑，各种浏览器&设备兼容问题，好在的是，随着技术&标准的不断发展，这个问题得到了极大程度的解决，这篇文章主要对之前开发过程中的屏幕适配问题做个的简单总结，包括两个部分。长屏适配 得益于CSS样式中vh&vw单位的支持普及，终于可以放心大胆的使用了，避免使用
做H5页面需要学什么，很多人问过我这个问题，而问这个问题的人基本上都是刚听说过h5，处在懵懂的阶段，他们往往会被一些网上炫酷页面所吸引，开始的目的也很简单，能通过自己的努力做出这些页面，而这些页面效果一般只要通过简单的html和css就能实现，但这仅仅是表面现象，做出来与做好是两码事。而要做好它，必须要深入地去了解什么是h5。网上有很多说法，说h5就是html的第5个版本，其实这不完全正确，h5已
1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。a.手淘方案 flexible+rem（参考https://github.com/amfe/article/issues/17）引入flexible.js，不需要在html结构中加入viewport标签。flexible.js会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添
转载
2024-05-09 09:29:26
49阅读
iOS/Android 浏览器(h5)及微信中唤起本地APP会遇到的问题：如何解决未安装APP时的做好引导页如何在微信中唤醒APP在iOS9中如何处理universal link被用户误关的情况如何解决Android各种机型、各种第三方浏览器导致的兼容问题等在APP未安装情况下，引导用户下载后打开APP后，如何进入之前唤起时指定的页面或内容，即如何实现场景还原在微信中唤醒APP时，如何进入指定的页
转载
2023-08-24 16:09:15
328阅读
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。方法一：引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击）淘宝的其实也和viewp
转载
2024-05-24 13:17:39
246阅读
# Android H5页面适配
随着移动互联网的迅猛发展，H5页面逐渐成为各类应用程序中不可或缺的一部分。对于Android设备而言，H5页面的适配尤为重要，因为不同设备的屏幕大小和分辨率差异会直接影响用户的使用体验。在本文中，我们将探讨Android H5页面适配的最佳实践，并提供代码示例及状态图与饼状图帮助理解。
## 什么是H5页面适配？
H5页面适配，通常是指将网页在不同设备上以合
原创
2024-10-08 05:31:52
62阅读
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 解释：Viewport指用户网页的可视区域，content中的
转载
2023-12-01 11:58:33
353阅读
# H5页面iOS页面适配及拖动问题解决方案
## 概述
在移动端开发中，H5页面的适配是一个常见的问题，特别是在iOS设备上。本文将介绍如何解决H5页面在iOS设备上的适配问题，并且解决拖动过程中可能出现的问题。
## 流程概述
下面是整个解决方案的流程概述，我们将按照以下步骤进行操作：
| 步骤 | 操作 |
| --- | --- |
| 1 | 获取设备的屏幕宽度和高度 |
| 2
原创
2023-08-13 05:34:07
500阅读
来源：一、背景 用户点击浏览器工具栏中的后退按钮，或者移动设备上的返回键时，或者JS执行history.go(-1);时，浏览器会在当前窗口“打开”历史纪录中的前一个页面。不同的浏览器在“打开”前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置都有关系。 在移动端HTML5浏览器和webview中，“后退到前一个页面”意味着：前一个页面的html/js/css等静态资源的请求（甚至是a
转载
2024-02-05 15:46:29
250阅读
文章目录html5移动端适配前言vw适配方法zoom适配方法手淘flexible.js方法小结 html5移动端适配前言一直以来移动端适配问题困扰着众多前端开发者，因为众多移动端设备的分辨率不尽相同，导致做到完美适配十分困难，以下方法均为本人在项目开发中所采用的，并且能满足正常的开发需求，现在归纳总结一下，供各位参考。vw适配方法此方法使得任何页面在不同分辨率设备，所显示的内容均为一样，相当于等
转载
2023-11-27 13:25:37
143阅读
H5开发我们会遇到这样的需求，在页面中打开外部APP。下面我们来总结一下H5打开APP的方式。并详细介绍 URL Scheme 打开方式。目前常见的唤醒APP方式有：1：URL Scheme2：Android intent3：Safari内置APP广告条4：Universal Links方式一：URL SchemeIOS和Android都支持Scheme，在APP开发时注册一下scheme就可以使
转载
2024-01-24 16:44:09
68阅读
MUI：http://dcloudio.github.io/mui/（使用H5+app模式，号称是最接近原生，但是目前在手机和电脑浏览器无法使用）app-framework：http://app-framework-software.intel.com/ （有Android、iOS等主题样式可供选择，有强大的XDK编辑器支持）Ratchet：http://goratchet.com/ （同样有An
转载
2023-09-18 16:28:12
144阅读
## H5页面rem尺寸390适配ios系统整体缩小
### 引言
在移动应用开发中，我们经常需要适配不同的设备和系统，以提供更好的用户体验。其中，H5页面的适配是一项常见的任务。本文将教会你如何实现H5页面rem尺寸390适配iOS系统整体缩小的方法。
### 流程展示
下面是整个流程的表格展示：
| 步骤 | 描述 |
| ---- | ---- |
| 1. | 设置viewp
原创
2023-12-03 07:32:11
87阅读
业务背景弹窗是页面交互中的重要组成部分，前端开发的同学应该经常与它打交道。小编的日常是做面向C端的H5活动页面，弹窗处理是每天都要面对的情况。根据日常工作中的场景，我总结了弹窗有以下特点：不同的活动页面，弹窗样式基本不同；不同的CSS开发者，弹窗的html结构不尽相同；同一个活动页面中的弹窗样式基本相同，但弹窗文案、按钮文案、按钮交互都不尽相同；第一点和第二点导致我们无法抽离出适用于所有页面的弹窗
转载
2023-10-18 10:38:57
534阅读
去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。 字体
排版
在有限的手机屏幕空间内，我们积累的经验告诉我们最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
转载
2023-08-24 22:17:41
331阅读
# 如何实现H5页面在iOS下下载应用
作为一名刚入行的开发者，你可能会遇到H5页面下载iOS应用的需求。这个过程不仅需要一定的技术知识，还需要理解一些基本的工作流程。本文将为你详细讲解整体流程，以及每一步所需的代码和解释。
## 整体流程
下面是实现H5页面下载iOS应用的流程：
| 步骤 | 描述 |
前言最近接到项目新需求，H5项目需要内嵌到微信小程序和APP里，然后将H5页面分享出去，被分享的人可以点击消息跳转到H5页面。H5页面不难，难的是要与微信小程序和APP进行交互，因为以前也没有接触过，所以这里卡的时间有点长。现分享出来小程序内嵌H5页面介绍这里小编使用的是 uinapp 写的H5项目！！！ H5页面放入小程序中，需要使用小程序的一个组件 web-view微信官方文档 官方文档中有详
转载
2023-07-12 10:50:53
744阅读
如何实现H5页面唤起iOS App
作为一名经验丰富的开发者，我将会教你如何实现H5页面唤起iOS App这个功能。首先，我们来看一下整个流程，然后逐步讲解每一步需要做什么以及需要使用的代码。
### 流程
下面是实现H5页面唤起iOS App的流程表格：
| 步骤 | 描述 |
| ---- | ------------ |
| 1 | 创建标签 |
| 2
原创
2024-06-16 04:14:53
203阅读
