uniapp微信小程序发布h5适配

背景

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

解决步骤

自定义模板路径

在manifest.json H5配置中,填写 index.html 模板路径
uniapp微信小程序发布h5适配_第1张图片
这是为了方便些条件编译当在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('+ (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>

此时,由于设置了最大的宽度和高度。页面的效果就会跟手机上差不多了。
uniapp微信小程序发布h5适配_第2张图片

关于多端兼容的思考

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

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

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

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

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

你可能感兴趣的:(微信小程序,css,css3)