2021-11-10

最新推荐文章于 2024-06-17 09:03:43 发布
最新推荐文章于 2024-06-17 09:03:43 发布
阅读量231 收藏 1
点赞数
分类专栏： 前端 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28912983/article/details/121249827
版权
在uniapp中将移动端转化为H5并确保在PC端正常显示遇到挑战。尝试使用全局样式设置页面宽度无效后，通过在pages.json创建webview页面并限制其最大宽度为500像素，实现了跨平台的良好展示效果。这种方法对于处理不同分辨率的设备可能更为适用。
摘要由CSDN通过智能技术生成

关于uniapp开发h5，设置页面最大宽度的问题

最近项目要求把开发的移动端改成H5，还要在PC端正常展示。
看了官方api
https://uniapp.dcloud.io/collocation/pages?id=globalstyle
在这里插入图片描述
按照文档上的我尝试了用前三个去做页面处理，很难受，只能在一定分辨率以内可以看，过大的话就无法正常展示了。又用了maxWidth，2.9.9+y的版本都可以使用的，但是很奇怪，我用的3.2+版本并没有效果。
百度也没有特别好的方法去处理，突然想到用webview页面去嵌套的方法或许有效。
于是直接在pages.json里面建了一个webview的页面路由，webview页面给了一个最大宽度500像素（不要用rpx）的限制，展示效果不错。
在这里插入图片描述

在这里插入图片描述
我设置的src只是本地调试，发布线上是需要更换完整地址的

油_条大_王
关注
专栏目录
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
weixin_39936792的博客
12-20 6268
该文章已过时，请忽视。从 uni-app 2.9 起，官方已提供了 PC 等宽屏的适配方案。使用 uni-app 开发的 H5 页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位 rpx，但是在 PC 端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。为了解决该问题，我们可以限定页面最大宽度，超过就固定宽度，并居中显示。比如 笔者 要开发一个 uni-app 应用，在 PC...
使用uniapp开发h5网页 适配手机 和 PC端
最新发布
tengyuxin的博客
08-22 727
第四，由于使用的是rpx单位，我希望移动端上，字体可以根据不同手机屏幕大小自动适配，在pc端就是固定尺寸，但问题时，由于使用match-media媒体查询时，移动端根据rpx自适应和Pc端保持文字大小固定产生冲突。第三，细微调整样式，我是根据uni.createMediaQueryObserver，监测是否符合条件，符合的一个样式，不符合的一个样式（该情况适用于html结构一样）。uni-app是以移动为先的理念诞生的，所以我们先开发出适配手机浏览器的网页，再来适配PC端。
关于uniapp中屏幕尺寸超过750配置，详解
m0_71311743的博客
11-06 1687
然后我们接着去蓝狐设置页面为自定义尺寸，调成750即可，（在uniapp中750意味着横屏满屏）当我们在开发中如果页面尺寸过大，会出现rpx适配失效，因此我们需要在pages.json中设置。
uniapp 封装请求
深漂小码哥
02-27 338
1.根目录下创建utils/api.js const BASE_URL = 'http://localhost:8082' export const myRequest = (options)=>{ return newPromise((resolve, reject)=>{ uni.request({ url: BASE_URL+options.url, method: options.method || 'GET', data: optionds.data ||
uniapp-H5项目的坑
m0_53001289的博客
12-28 1021
uniapp h5
Uniapp页面设置宽高100%
weixin_42216094的博客
02-11 7058
如何设置uniapp的页面宽高为100%。
spine-unity-3.8-2021-11-10.unitypackage
12-24
unity spain 3.8 2021-11-10
gmall2020-mock-db-2021-11-14.jar
06-26
gmall2020-mock-db-2021-11-14.jar
2021-11-10 09-10-59.mp4
03-25
2021-11-10 09-10-59.mp4
2021-01-11-raspios-buster-i386.iso 百度网盘
02-12
树莓派系统镜像 2021-01-11-raspios-buster-i386.iso
2021-11-10课程.mp4
03-25
uipath 高级课程
uniapp生成的h5页面禁止浏览器上缩放页面
weixin_45463061的博客
09-18 3176
uniapp生成的h5页面禁止浏览器上缩放页面
uni-app宽屏适配指南
abc8002117034的博客
06-17 1697
uni-app是以移动为先的理念诞生的。从uni-app 2.9起，提供了PC等宽屏的适配方案，完成了全端统一。PC适配和屏幕适配略有差异。PC适配包含宽屏适配和两方面的工作。uni-app内置组件的PC适配，又包括和这两部分。这块工作不在本文的讨论范围内，尤其是开发者在PC端可以随意使用普通html元素和组件，不局限于uni-app内置组件。所以本文重点讨论屏幕适配。
uniapp 解决 h5 PC端 屏幕过大失真 问题
HHH917的博客
04-06 3742
效果 解决 目前 我也暂时不知道为什么 有时候设置了 rpxCalcMaxDeviceWidth 后 当屏幕宽度超过 960px后 应该 750rpx 应该等于375px 但是有时候又不行 所以目前有两种写法 一种是默认的 另一种是自定义 默认不行就使用另外一种 pages.json "globalStyle" 对象中填写 如下 默认 "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceW
移动端(H5)设置最大宽度兼容PC
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
04-01 6748
为使手机页面在电脑浏览器中打开时依然保持居中显示的良好布局，所以需要一个良好的兼容结构。 源码示例效果图： 手机端 电脑端 源码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo...
uniapp rpx自适应 最大宽度 960px后失效
weixin_43457011的博客
03-28 3070
uniapp rpx 自适应超过960px时失效 小于 960px 时 大于960px时 失效 只能自己再配置了，我用的是媒体查询 小于960px时 大于960px时 @media screen and (min-width: 960px) { .content { margin: auto; display: flex; flex-flow: column; justify-content: center; width: 80%; background-c
uni-app设置 H5 页面的可视区高度
marllen的博客
04-11 3742
设置当前页面的高度等于屏幕可视区高度 document.documentElement.clientHeight即当前屏幕的可视区高度 给最外层content添加动态样式 :style="setHeight" 计算属性,setHeight()方法，返回样式 height: 数值 px 可视区高度，包含了浏览器的状态栏，滚动条等的高度，必要时需要减掉 'height:'+ (document.documentElement.clientHeight - 20) + 'px' <template&gt
uniapp实现H5对PC的适配
09-23 6601
前言： 使用uniapp做的h5页面，在PC端显示时，发现由于rpx单位计算基准值太大，导致页面排版布局错乱 思路： 刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px是固定单位，在移动端显然没rpx好使； 今天去官方社区逛了一圈，发现有大神已经提出PC端适配方案了，就几句代码就OK了，突然发现我真是蠢啊，┭┮﹏┭┮ 新建一个pc.js，随便找个地方放着,内部代码如下(变量sw值的设置，你们觉得怎么好看怎么来吧，下面的是我根据我的感
优化代码SELECT SUM(CASE WHEN order_date BETWEEN '2021-11-01' AND '2021-11-15' THEN 1 ELSE 0 END) AS new_customer_count, SUM(CASE WHEN order_date BETWEEN '2021-11-01' AND '2021-11-15' THEN amount ELSE 0 END) AS new_customer_amount, SUM(CASE WHEN order_date BETWEEN '2021-11-01' AND '2021-11-15' AND customer_id IN ( SELECT customer_id FROM orders WHERE order_date < '2020-11-01' ) THEN 1 ELSE 0 END) AS old_customer_count, SUM(CASE WHEN order_date BETWEEN '2021-11-01' AND '2021-11-15' AND customer_id IN ( SELECT customer_id FROM orders WHERE order_date < '2020-11-01' ) THEN amount ELSE 0 END) AS old_customer_amount FROM orders WHERE order_date BETWEEN '2021-11-01' AND '2021-11-15'
05-25
SUM(IF(order_date BETWEEN '2021-11-01' AND '2021-11-15', 1, 0)) AS new_customer_count, SUM(IF(order_date BETWEEN '2021-11-01' AND '2021-11-15', amount, 0)) AS new_customer_amount, SUM(IF(order_date...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值