使用uniapp开发h5网页 适配手机 和 PC端

于 2024-08-22 11:12:10 发布
阅读量2.5k 收藏 8
点赞数 6
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tengyuxin/article/details/141423245
版权

uni-app是以移动为先的理念诞生的，所以我们先开发出适配手机浏览器的网页，再来适配PC端。

第一，目前我先开发移动端官方网站

第二，由于Pc端布局 和 移动的布局结构不同，我直接根据uniapp提供的match-media组件，动态根据媒体查询条件显示对应组件（该情况适用于html结构不同）。

	<!-- 主体内容 -->
	<match-media :min-width="990">
		<PcMainContentVue />
	</match-media>

	<match-media :min-width="0" :max-width="990">
		<PhoneMainContentVue />
	</match-media>

第三，细微调整样式，我是根据uni.createMediaQueryObserver，监测是否符合条件，符合的一个样式，不符合的一个样式（该情况适用于html结构一样࿰

最低0.47元/天 解锁文章
【商城实战(51)】从uniapp商城到PC端的华丽转身：适配与优化全攻略
邓邓子的博客
03-20 1008
本文围绕 PC 端商城的优化展开。在布局调整上，介绍 PC 屏幕尺寸特点，借助 uniapp 方案及案例实现灵活适配。交互优化涵盖鼠标悬停、键盘操作，提出综合策略。加载速度提升从优化图像、减少 HTTP 请求、利用缓存与 CDN 着手。经优化，商城布局合理、交互体验提升、加载速度大幅加快。后续可在交互细节、加载技术等方面探索，如引入 3D 交互、采用 HTTP/3、利用人工智能预加载及 WebAssembly 技术，以持续提升用户体验，增强竞争力。
【商城实战(25)】解锁UniApp移动端适配秘籍，打造完美商城体验
最新发布
邓邓子的博客
03-12 1314
本文围绕 UniApp 在移动端的适配展开，介绍了 UniApp 适配移动端设备的原理，包括条件编译、相对单位及弹性布局，并给出从 Spring Boot 后端获取数据展示的示例。阐述利用响应式布局实现页面自适应的方式，如 Flex 布局、媒体查询及自适应单位，附商品详情页的源码示例。还针对移动端常见适配问题，如刘海屏和虚拟按键适配，提供了在 manifest.json 文件配置及页面样式设置、监听虚拟按键状态调整布局等实现方法，助力开发者优化移动端用户体验。
图文详解uni-app PC端宽屏适配方案
YMX2020的博客
08-12 1万+
uni-app
uniapp h5端兼容pc端
honey_kg的博客
10-31 4425
uniapp h5端兼容pc端
uniapp实现H5对PC的适配
09-23 6878
前言： 使用uniapp做的h5页面，在PC端显示时，发现由于rpx单位计算基准值太大，导致页面排版布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没rpx好使； 今天去官方社区逛了一圈，发现有大神已经提出PC端适配方案了，就几句代码就OK了，突然发现我真是蠢啊，┭┮﹏┭┮ 新建一个pc.js，随便找个地方放着,内部代码如下(变量sw值的设置，你们觉得怎么好看怎么来吧，下面的是我根据我的感
uniapp适配pc_uniapp+Html5端实现PC端适配
weixin_42350544的博客
02-04 4139
前言：使用uniapp做的h5页面，在pc端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱思路：刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没upx好使；后来百度好久，发现都没有解决办法，偶然间突发奇想，能不能利用iframe在页面载入前将宽度设置为375px(750upx)，来达到欺骗...
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
weixin_39936792的博客
12-20 6792
该文章已过时，请忽视。从 uni-app 2.9 起，官方已提供了 PC 等宽屏的适配方案。使用 uni-app 开发的 H5 页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位 rpx，但是在 PC 端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。为了解决该问题，我们可以限定页面最大宽度，超过就固定宽度，并居中显示。比如 笔者 要开发一个 uni-app 应用，在 PC...
uni-app 打包为 H5 并上传服务器
01-08
前言 我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，打开并作如图配置： 运行的基础路径 如果你写的是 “ /H5/ “ ，那么你的服务器中要建立一个 H5 文件夹。 发行时启动摇树优化 功能是去掉无用代码与僵尸代码，但勾选时要慎重。 发行(打包) 依次点击菜单 → 发行 → 网站-h5手机版，然后弹出对话框，请做如下配置： 最后点击 发行 ，控制台会显示打包日志。 查看包 打包成功后，控制台会给出如下类
使用uniapp创建小程序和H5界面
故里2130
02-18 1万+
补充：其中uni-ui是基础组件的补充组件，所以分2部分，其实都是一回事，如果创建的是uni-ui项目模板，那么就可以一起使用，不用引用了，否则，就要单独去引用，和PC页面同理。uniapp的介绍可以看官网，接下来我们使用uniapp创建小程序和H5界面，其他小程序也是可以的，只演示创建这2个，其实都是一套代码，只是生成的方式不一样而已。这里说的UI控件，就是类似于ElementPlus一样，自带的控件是uni开头的，我们也可以叫它原生UI，网站可以查看具体组件的用法，选择如图所示，下面选择Vue3。
【实战】H5 页面同时适配 PC & 移动端 —— 旋转横屏
程序边界
09-15 8844
与此同时，你也会学习协程、异步编程、自动化测试的相关知识，并学习在企业级应用中混合使用Kotlin与Java。作者是Kotlin领域的资深专家和布道者，本书源于他对Kotlin编译器源码的反复研读和大量的工程实践，不仅细致讲解了反射、程序静态分析、 Java注解处理器、Kotlin符号处理器、Kotlin编译器插件、元程序的开发和调试等核心元编程技术，而且详细剖析了Jetpack Compose的编译器插件和IntelliJ 插件、AtomicFU 的 JVM 字节码和JavaScript代码的生成逻辑。
uniapp 兼容pc与手机的样式方法
2301_79507619的博客
03-19 2749
通过上述方法，你可以根据需求选择适合的方式来实现uni-app应用在PC端和手机端的样式兼容性。uni-app支持条件编译，可以根据不同的平台编写特定的代码，包括样式代码。利用条件编译，可以为APP、H5、小程序等不同的平台编写特定的样式或逻辑。在开发uni-app应用时，经常需要应对多种设备和屏幕尺寸的兼容性问题，特别是在处理PC端和手机端时。在Vue组件中，你可以利用计算属性根据条件动态生成样式对象，然后将这个对象绑定到元素的`:style`属性上。/* App专有样式 *//* 手机端样式 */
uniapp_内嵌H5
分享程序相关知识
05-22 2869
使用uniapp开发微信小程序，实现内嵌H5的功能。
uniapp+Html5端实现PC端适配
11-19
使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大...
uni-app中H5、PC端websocket使用
08-24
在uni-app框架中，我们不仅可以使用WebSocket在移动H5环境中，还可以扩展到桌面PC端，实现高效且实时的数据交互。 在uni-app中，WebSocket的使用主要包括以下几个关键步骤： 1. **初始化WebSocket连接**： 在uni-...
Uniapp中嵌入H5（ uniapp开发的H5），并且在H5中跳转到APP的指定页面
热门推荐
qq_42103673的博客
10-26 1万+
Uniapp中嵌入H5（ uniapp开发的H5），并且在H5中跳转到APP的指定页面
uniapp+uview 学习笔记（二）—— H5开发
summer_gf的博客
03-18 4101
本文主要介绍使用uniapp框架和uview组件库进行H5开发，仅供学习参考。
uniapp开发微信小程序嵌套h5页面
chenhuan9的博客
07-24 1032
最后就保存添加的域名就行，如果去刷新嵌套页面，页面空白的话，清除一下缓存，这次我就遇到这个问题，一直都找不到原因，原来是有缓存了。2.跳转遇到不能打开此页面问题，或是打开空白，需要解决跨域的这些问题。，点击左边菜单开发管理，在业务域名里面配置可以跳转的域名。下载校验文件，将文件放在要嵌套的域名名录下。
uniapp开发多页面h5程序_uni-app实现多端开发
weixin_34060849的博客
12-24 3873
多端开发，听名字就感觉不一样，一套代码。多端使用，适用于各个平台。市面上很多关于多端开发的框架，比较常用，流行的框架 uni-app，Chameleon(变色龙),taro这些，都可以支持多端，一套代码，8个平台支持，语法差异上，uni-app和Chameleon(变色龙)都选择使用的是小程序和vue的语法结合，但是taro语法是react,熟悉react语法，比较熟悉这套框架，对于技术选项，框架...
uniapp swiper自适应内容高度
06-08
在uniapp中，实现swiper自适应内容高度的方法与在普通网页中类似。不过需要注意的是，uniapp中的Swiper组件是基于第三方Swiper库封装的，需要使用相应的API来操作。 以下是实现swiper自适应内容高度的具体步骤： 1. 在Swiper初始化的时候，通过uni.createSelectorQuery()方法获取Swiper容器和所有的slide元素。 ```javascript onLoad() { uni.createSelectorQuery().in(this).select('.swiper-container').fields({ size: true }, this.onContainerSizeReady).exec(); }, onContainerSizeReady(res) { var swiperContainerWidth = res.width; uni.createSelectorQuery().in(this).selectAll('.swiper-slide').boundingClientRect(this.onSlidesSizeReady).exec(); }, ``` 2. 遍历所有的slide元素，计算出最高的slide高度。 ```javascript onSlidesSizeReady(res) { var slidesHeight = res.map(function (item) { return item.height; }); var maxHeight = Math.max.apply(null, slidesHeight); this.swiperHeight = maxHeight; }, ``` 3. 在Swiper组件中，使用swiperHeight属性设置Swiper容器的高度为最高slide的高度。 ```html <swiper class="swiper-container" :style="'height:' + swiperHeight + 'px;'"> <swiper-item class="swiper-slide" v-for="(item, index) in items" :key="index">{{ item.content }}</swiper-item> </swiper> ``` 完整的实现代码如下： ```javascript export default { data() { return { items: [ { content: 'Slide 1' }, { content: 'Slide 2' }, { content: 'Slide 3' }, { content: 'Slide 4' }, { content: 'Slide 5' }, ], swiperHeight: 0 } }, onLoad() { uni.createSelectorQuery().in(this).select('.swiper-container').fields({ size: true }, this.onContainerSizeReady).exec(); }, onContainerSizeReady(res) { var swiperContainerWidth = res.width; uni.createSelectorQuery().in(this).selectAll('.swiper-slide').boundingClientRect(this.onSlidesSizeReady).exec(); }, onSlidesSizeReady(res) { var slidesHeight = res.map(function (item) { return item.height; }); var maxHeight = Math.max.apply(null, slidesHeight); this.swiperHeight = maxHeight; } } ``` 需要注意的是，uniapp中的Swiper组件还提供了其他的API，如autoplay、loop、pagination等，可以根据需要进行设置。同时，uniapp中的Swiper组件也支持嵌套使用，可以实现更为复杂的滑动效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@穷且益坚，不坠青云之志

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值