uniapp网页缩放，适配手机和PC

Dai_代代

已于 2024-05-10 11:44:32 修改

阅读量717

点赞数 4

文章标签： uni-app 前端 javascript

于 2024-03-20 14:12:49 首次发布

本文链接：https://blog.csdn.net/qq_43024468/article/details/136874844

版权

CSS用px

<view class="" :style="pageStyle">
	<view>渲染的内容</view>
</view>

		computed: {
			pageStyle() {
				return {
					transform: `scale(${this.scale})`,
					'transform-origin': '0px 0px'
				}
			}
		},
		data() {
			return {
				scale: 1
			};
		},
		created() {
			this.autoSize()
			window.onresize = () => {
				this.autoSize()
			}
		},
		methods: {
			// 自适应屏幕宽度按比例缩放页面
			autoSize() {
				// 获取网页宽度
				let width = window.innerWidth
				// 计算缩放比例
				this.scale = width / 1920;
			}
		}