Vue.js / Nuxt.js / uni-app - 移动端 H5 网页，在电脑 PC 上打开时居中显示（手机网页在电脑上打开后，简单粗暴防止 “界面样式“ 拉伸变形的解决方案）适用所有web项目

已于 2025-01-19 15:37:58 修改
阅读量5.3k 收藏 10
点赞数 4
CC 4.0 BY-SA版权
分类专栏： + JScript + Vue + Vue3 文章标签： vue.js nuxt.js uni-app H5 移动端网页 防止手机H5变形 最好用的方法
于 2022-11-23 14:04:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/127998975
+ Vue3 同时被 3 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ JScript
125 篇文章 ¥9.90 ¥99.00
订阅专栏
针对移动端H5在电脑PC上打开时样式拉伸变形的问题，本文提供了一个简单有效的解决方案。通过在HTML的`<body>`标签内添加特定代码，可以实现移动端页面在PC上的居中显示，适用于Vue.js、Nuxt.js和uni-app等项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

无论您的项目是 Vue.js，还是传统 web 项目，都可以轻松完成。

通常移动端 H5 开发完毕后，在电脑 PC 浏览器打开时，却发现页面直接 “毁了”，

本文给您提供一个简单粗暴的方案，几分钟就能搞定简单好用，

如下图效果所示，实现 移动端适配PC端，免去开发两端解决方案，

无需任何第三方插件和代码，适用于任何项目

在这里插入图片描述

解决方案

详细示例代码如下，

了解本专栏 订阅专栏 解锁全文
使用uniapp开发h5网页 适配手机 和 PC端
tengyuxin的博客
08-22 3034
第四，由于使用的是rpx单位，我希望移动端上，字体可以根据不同手机屏幕大小自动适配，在pc端就是固定尺寸，但问题时，由于使用match-media媒体查询时，移动端根据rpx自适应和Pc端保持文字大小固定产生冲突。第三，细微调整样式，我是根据uni.createMediaQueryObserver，监测是否符合条件，符合的一个样式，不符合的一个样式（该情况适用于html结构一样）。uni-app是以移动为先的理念诞生的，所以我们先开发出适配手机浏览器的网页，再来适配PC端。
uniapp实现H5页面内容居中与两边留白，打造类似微信公众号阅读体验
m0_52223449的博客
01-12 754
在 UniApp 中，由于需要兼容多端应用，我们通常使用rpx作为尺寸单位。然而，在某些情况下，如需要实现内容居中且两边留白时，直接使用rpx可能会带来一些限制。这时，我们可以考虑使用px或rem等单位，但又会遇到一些问题，如fixed定位元素以可视窗口为准，以及二次开发项目中的复杂性。
兼容PC端的H5播放器，代码已经精简，播放器可换肤
08-01
此代码已经精简，可以直接调用，PC段兼容IE各版本，播放器可自定义皮肤。
深度解析 uni-app：跨端开发的进阶之路与实战优化
最新发布
2301_81335708的博客
06-23 801
《uni-app跨端开发全攻略》深入解析了uni-app框架的核心技术与实践方法。文章首先介绍了uni-app基于Vue.js的"一次编写，多端运行"原理，重点讲解了条件编译技术和统一API机制。在开发实战部分，详细阐述了组件化开发、Vuex状态管理和路由配置技巧。性能优化方面提供了图片压缩、代码分割和减少DOM操作等有效策略，并针对多平台样式差异和插件集成等常见问题给出了解决方案。文章还展望了uni-app未来在AI集成和多端融合方面的发展趋势，为开发者提供了全面的技术参考。通过系统化
h5页面在pc居中显示
qq_38179746的博客
11-24 1141
我们开发h5页面在pc刚打开是铺满屏幕的，需要显示在中间，像这样 其实很简单，在body加上他的最大宽度就好了 body{max-width: 640px;margin: 0 auto !important;} 转自https://blog.csdn.net/weixin_45885847/article/details/109842773 ...
Vue H5项目如何在PC端时布局居中展示，而不全屏拉伸
HaushoLin的博客
06-14 3462
这篇教你vue H5项目PC端页面如何居中展示
如何让h5页面在PC端显示居中
weixin_45885847的博客
11-20 3779
最近在开发h5的时候，遇到了一个需求，要求在pc端展示h5页面时，页面能正好在pc屏幕的中间，我是怎么实现的呢？快跟我一起看看吧！ 页面效果 起初h5页面开始编写的时候用的rem布局，于是就有了下面的代码： ```javascript let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //得到html的Dom元素 let htmlDom = document.getElementsByT
pc调试微信h5页面
John的专栏
07-16 5240
一、微信配置：  参考地址：https://testerhome.com/topics/6871 1.打开微信，设法打开网址 http://debugx5.qq.com （推荐直接把这个网址发给文件传输助手，然后就可以直接打开链接了）  2.在打开的网页中选择 【信息】-&gt;【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】,并点击提交按钮  3.微...
手机端H5应用页面适配PC端
m0_59722227的博客
02-23 1385
h5手机端适配pc端
PC 打开 vue h5移动端 页面 不变形《转载》
TwoBE9876的博客
05-01 1838
有时候，我们想让pc打开适配手机的h5，并且不变形，在不使用媒体查询的情况下，我们可以使用以下方式： 实现功能如下 pc打开 周围留空白，居中显示 当浏览器切换为手机模式/手机打开网址时 会变为手机模式 以下为主要代码 public 文件夹下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script as..
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
weixin_39936792的博客
12-20 6922
该文章已过时，请忽视。从 uni-app 2.9 起，官方已提供了 PC 等宽屏的适配方案。使用 uni-app 开发的 H5 页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位 rpx，但是在 PC 端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。为了解决该问题，我们可以限定页面最大宽度，超过就固定宽度，并居中显示。比如 笔者 要开发一个 uni-app 应用，在 PC...
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
weixin_46001736的博客
09-27 6181
uni-app：实现元素在屏幕中的居中（绝对定位absolute）
uni-app整合vant、nuxt
hahahhahahahha123456的博客
04-30 3275
创建uni-app移动端项目使用uni-cli下载 vue create -p dcloudio/uni-preset-vue my-project 下载Nuxt框架 ,无需使用create-nuxt-app. 脚手架 yarn add nuxt 配置package.json文件 { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": ...
如何使移动端项目在PC端依然可以良好的展示
A1570555124的博客
04-22 2746
前置条件： 移动端适配使用的是如下适配方案, 也就是使用的rem作为适配。 html{ font-size: 13.333333vw; } body { font-size: 0.14rem; // 等于 14px } 问题现状: 移动端页面在pc端页面显示异常 先写一段简单的vue代码，生成4个盒子和一个顶部fixed定位的盒子。 <div class="list" v-for="i in 4" style="height: 1rem;border: 1px solid;">
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 988
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
PC 打开 vue h5移动端 页面 不变形
wyk304443164的专栏
12-27 2619
有时候，我们想让pc打开适配手机的h5，并且不变形，在不使用媒体查询的情况下，我们可以使用以下方式： 实现功能如下 pc打开 周围留空白，居中显示 当浏览器切换为手机模式/手机打开网址时 会变为手机模式 以下为主要代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script async="" src="https://www.g
pc端实现 网页居中显示 且自适应
weixin_30763455的博客
05-25 743
通过给最外层添加绝对定位和translate(-50%,-50%) scale（ratio）来实现居中且适度缩放。 <!DOCTYPE html > <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ...
uniapp 解决 h5 PC端 屏幕过大失真 问题
HHH917的博客
04-06 4310
效果 解决 目前 我也暂时不知道为什么 有时候设置了 rpxCalcMaxDeviceWidth 后 当屏幕宽度超过 960px后 应该 750rpx 应该等于375px 但是有时候又不行 所以目前有两种写法 一种是默认的 另一种是自定义 默认不行就使用另外一种 pages.json "globalStyle" 对象中填写 如下 默认 "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceW
H5盒子居中的办法
m0_72815229的博客
11-27 326
【代码】H5盒子居中的办法。
react pc端项目和移动端项目区别
04-25
React PC端项目和移动端项目的主要区别在于视图的布局和设计。PC端项目通常会使用较大的屏幕来展示更多的内容，而移动端项目则需要考虑不同屏幕尺寸和触摸操作的影响。此外，移动端项目也需要更注重性能和资源的使用，以保证应用程序的流畅性。因此，在编写React PC端项目和移动端项目时，需要根据不同的平台和应用场景进行不同的优化和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端开发大师鸭

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值