手机端H5应用页面适配PC端

文章讨论了H5网页在手机浏览器正常但在电脑浏览器上布局错乱的问题,解决方案是使用uniapp的媒体查询技术,在App.vue或公共样式中设置当窗口宽度大于500px时,将页面宽度固定为500px并实现水平居中。
摘要由CSDN通过智能技术生成
h5网页应用在手机浏览器打开是正常的当时在电脑浏览器打开是就会出现布局错乱的问题

解决办法:

我是用uniapp开发的,将下面代码放在App.vue就可以生效,你们如果不是就放在公共样式里就行

	@media only screen and (min-width: 500px) {
		page {
			//background-color: red !important;
			width: 500px;
			margin: 0 auto;
		}
	}

这里是通过媒体查询如果窗口超过500px就把每个页面的page宽度写死500px并居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值