uniapp微信小程序发布h5适配

最新推荐文章于 2025-09-29 13:44:14 发布

原创最新推荐文章于 2025-09-29 13:44:14 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #css #css3

本文介绍了在uniapp项目中，为实现微信小程序与H5的兼容，如何进行布局和字体适配。通过自定义模板路径和在H5配置中设置index.html，解决了PC和iPad上打开H5时出现的布局错乱问题。文章讨论了rpx在不同设备上的局限性，并提出使用rem单位能更好地保持多端一致性。

部署运行你感兴趣的模型镜像

背景

这次项目是要兼容微信小程序、h5的。目前开发完成发现，微信小程序和手机浏览器打开h5，页面都是正常的。在PC浏览器和ipad上打开H5，出现了布局和字体错乱。

解决步骤

自定义模板路径

在manifest.json H5配置中，填写 index.html 模板路径
在这里插入图片描述
这是为了方便些条件编译当在h5下的时候

在index.template.html中

<!DOCTYPE html>
<html lang="zh">
<head>
	<link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>
		<%= htmlWebpackPlugin.options.title %>
	</title>
	<script>
		var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
		document.write('<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
	</script>
	<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<style type="text/css">
	/* #ifdef H5 */
	
	*{
	-webkit-text-size-adjust: none;
	}
	
	@media only screen and (min-width:700px){
		html{
			font-size: 13px;
			background-color: #fff;
			height: 100vh;
			overflow: hidden;
		}
		body {
			max-width: 375px;
			max-height: 667px;
			background: red;
			position:absolute;
			left:0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			border: solid 1px #e5e5e5;
		}
	/* #endif */
</style>
<body>
	<noscript>
		<strong>Please enable JavaScript to continue.</strong>
	</noscript>
	<div id="app"></div>
</body>
<script>
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault()
}
})
document.addEventListener('gesturestart', function(event) {
event.preventDefault()
})
}
</script>
</html>

此时，由于设置了最大的宽度和高度。页面的效果就会跟手机上差不多了。
在这里插入图片描述

关于多端兼容的思考

在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。
但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。官网

但同时uniapp也是对这个问题做了适配的。

但我想说的是，前端小程序这块包括我有六位同学，项目开始时关于字体大小单位沟通过，最后觉得既然用uniapp了，那么就用 rpx。

从结果来看，在做兼容多端的时候，我尝试用rem发现它的表现是很好的。在ipad、PC浏览器的效果几乎和手机上的效果是一样的。

当然，关于这个问题大家肯定会有不同的看法，希望能找到较为完善的方法。

您可能感兴趣的与本文相关的镜像