移动端H5页面开发的几种方法

article/2025/11/9 14:28:28

单位: px
宽度百分比,高度px
在不同屏幕下的效果是不一样的,可用媒体查询(@media)对不同宽度的手机进行适配,麻烦,不推荐使用

单位:rem
1、flexible
用法:https://blog.csdn.net/sinat_27358671/article/details/82772206
2、原生js重置rem单位

(function (doc, win, imgW) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;console.log(clientWidth);if (!clientWidth) return;if (clientWidth >= imgW) {docEl.style.fontSize = '100px';} else {docEl.style.fontSize = 100 * (clientWidth / imgW) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window, 750);

其中的750为设计稿尺寸,当宽度大于750,html设置字体大小为100px。
如下图,不同宽度下的效果
在这里插入图片描述
在这里插入图片描述
单位:vw,vh
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
兼容性:
(1)桌面 PC
• Chrome:自 26 版起就完美支持(2013年2月)
• Firefox:自 19 版起就完美支持(2013年1月)
• Safari:自 6.1 版起就完美支持(2013年10月)
• Opera:自 15 版起就完美支持(2013年7月)
• IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)

(2)移动设备
• Android:自 4.4 版起就完美支持(2013年12月)
• iOS:自 iOS8 版起就完美支持(2014年9月)


http://chatgpt.dhexx.cn/article/DOb9qP4h.shtml

相关文章

H5页面调用微信支付

1、H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名、JS接口安全域名、网页授权域名。支付功能页面需在此域名链接下的页面。 2、加入域名后,就可以在H5页面调用微信支付功能。首先请求后台…

H5实现移动端,PC端页面分享

想做个页面分享功能,既要兼容移动端,也要兼容PC端。 找了一轮,决定PC端用百度分享的api: http://share.baidu.com/code/advance 移动端一开始想用soshm.js,发现ios没问题,但安卓手机在微信上点微博完全没…

app端内h5页面使用微信h5支付

app端内h5页面使用微信h5支付 app端内h5页面使用微信h5支付一、起初使用的方法二、解决方法三、最后 app端内h5页面使用微信h5支付 一、起初使用的方法 在对接支付宝支付的时候,我是使用window.open()直接打开后端返回的链接,完全没有任何问题&#xf…

H5页面内嵌到微信小程序和APP,做分享操作

前言 最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面。H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过,所以这里…

H5及H5页面是什么意思?如何制作H5页面?

H5是HTML5的简称。HTML5是HTML最新的修订版本,是一种超文本标记语言。H5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。 H5页面就是利用html5制作出来的页面,尤其在微信中发展…

拿走!H5版本ChatGPT开源等你

近些日子忙里偷闲的研究chatGPT,也小弄了一个公众号版本,一个H5版本的,现在H5版本的也就是开放给大家体验的版本,还不知道的伙伴可以关注#公众号:李连活,回复“888”领取体验,和AI畅快聊天问答。…

不懂技术,如何轻松制作微信H5页面?

H5这个由HTML5简化而来的词汇,正通过微信广泛传播。H5是集文字、图片、音乐、视频、链接等多种形式的展示页面,丰富的控件、灵活的动画特效、强大的交互、实现信息传播,非常适合通过手机的展示、分享。也因其灵活性高、开发成本低、制作周期短…

关于浏览器加载不出图片的问题

刚刚才解决 幸好有截图,不然口说无凭了 分割线 我试过上网搜过问题,但是好像都没什么用 接连好多次这样加载图片加载不出来,我就开始想怎么解决了 今天灵机一动,是不是图片的缓存这些太多,导致浏览器加载不出来呢。…

解决loadrunner 12 录制时打不开Chrome谷歌浏览器,显示正在加载中的问题

解决loadrunner 12 录制时打不开Chrome谷歌浏览器,显示正在加载中的问题 刚开始学习loadrunner,安装了loadrunner 12,录制时浏览器一直显示正在加载… 看到网上有人说录制的时候打开Fiddler就可以了,试了下确实可以。但如果录制的…

chrome插件与本地exe程序之间的信息交互

一、概述 如果想要通过本地exe程序与chrome插件之间的通信,我们需要利用到NativeMessage。 具体环境与实现步骤见下文。 二、环境 1. window10操作系统 2. chrome浏览器 3. pycharm 三、实现步骤 1. 自己编写一个chrome插件 chrome插件的开发详细步骤与文件结构可…

win10更新后 chrome内核浏览器总是打开网页一直加载 甚至打不开 解决方法

升级win10之后如果出现chrome内核的浏览器网页总是打不开 打开很慢 而ie和edge是可以正常访问的 用这个方法可以 我弄了几天终于 搞好了 我直接转载过来了 近期,工程师收到大量反馈360浏览器,极速模式无法打开网页,兼容模式无此问题。 IE浏览…

客户端工具登录异常问题分析

1、首先判断是用户名密码是否错了; 2、在用户名密码正确的前提下,需要查看oninit程序的权限是否正确。如果权限异常,也会存在上述问题的 1、通常可以理解成informix弱口令的问题,调整弱口令之后,等几分钟即可

(十)服务端异常退出

(十)服务端异常退出 之前讲解了客户端异常退出的代码,但是服务端也是会异常退出的。如果服务端异常退出,它会将所有在线的客户的状态都设置为offline。即,让所有用户都下线。 异常退出一般是CTRL C时,我们…

统一异常处理 GlobalExceptionHandler

平时经常在代码里面 try {... } catch (Exception e) {... }这样子代码繁琐而且也不好看。特别是还有一些需要自己new一个map封装业务的异常信息,是在是难看。所以就需要引出全局异常。经过一些封装,就可以实现这样的效果了。 还是看代码吧&#xff01…

【异常】使用ApiFox客户端提示 “ 加载出错,请检查网络是否异常”,但是Web端是正常访问的

一、报错内容 提示内容类似于如下:连接Apifox服务器出错,请检查网络是否异常 二、报错说明 可能是因为APIFOX升级版本了,导致的问题,目前没有找到根因 三、报错解决 3.1 解决方案 1 使用Chrome的插件——Apifox Agent&#…

(七)客户端异常退出事件处理

如果客户端异常退出了,我们会从服务端记录用户连接的 _connMap 表中找到改用户,如果它断连了就从此表中删除,并设置其状态为 offline。 因为记录用户连接情况的表是可能被多个线程操作的,所以访问表的操作都要使用互斥锁进行保护。…

彻底解决aapt2异常

随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666) from:https://blog.csdn.net/qq_34879948/article/details/80313690 升级android studio 3.0后,在创建新项目时会报一个异常&#xff0c…

客户端异常的处理

在我们的项目中,我们一般只会捕获我们自己能够想到的异常,但是这样就会导致一些无法捕捉到的异常被漏出去,因为我们不能确定它们会在什么地方出现,例如像NullPointerException,ClassCastException,IndexOut…

2021年6月大学英语六级作文

目录 1.第一套 2.第二套 3.第三套 1.第一套 中国高等教育∶Directions∶For this part, you are allowed 30 mimites to write an essay based on the chart below.You should start your essay with a brief description of the chart and comment on Chinas ac…

【人工智能】大模型平台新贵——文心千帆

个人主页:【😊个人主页】 🌞热爱编程,热爱生活🌞 文章目录 前言大模型平台文心千帆发布会推理能力模型微调 作用 前言 在不久的之前我们曾讨论过在ChatGPT爆火的大环境下,百度推出的“中国版ChatGPT”—文…