小程序设置height: 100% 无效?

在开发小程序时,遇到一个常见问题,即在开发者工具中布局显示正常,但在真机调试时出现布局错位。问题根源在于没有正确处理不同设备的屏幕适配。通过调整样式代码,将页面宽度和高度设置为100vh和100vw,可以确保内容始终填充整个屏幕,从而解决真机适配问题。这种方法利用了视口高度单位vh和视口宽度单位vw,实现响应式布局,确保在不同设备上的一致显示。

在开发小程序时,肯定是要先设置根标签的大小为屏幕大小,然后内部标签可通过继承父元素大小来进行布局。

问题描述

但是遇到这么一个问题,就是在开发者工具中效果是ok的,真机调试就有问题。

代码展示

样式代码如下:

page{
	width: 100%;
	height: 100%;
}

解决办法

使用vh、vw

page{
	width: 100vh;
	height: 100vw;
}
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值