1. window电脑版微信小程序 webview h5无法新开页面
解决办法:去掉 target='_blank'
2. 移动端浏览器(如 Safari 和 Chrome)的地址栏和工具栏会动态显示和隐藏,导致视口高度 (vh) 变化,从而影响布局。
解决办法:使用 CSS 自定义属性(CSS Variables)
// 通过 CSS 自定义属性动态设置高度。
:root {
--nav-height: 10vh;
}
.nav {
height: var(--nav-height);
}css
// 结合 JavaScript 动态更新:
function updateNavHeight() {
document.documentElement.style.setProperty('--nav-height', `${window.innerHeight * 0.1}px`);
}
window.addEventListener('resize', updateNavHeight);
updateNavHeight();
3. 微信小程序webview嵌入h5, 不识别dvh单位
4. 微信小程webview嵌入h5,加载9M的视频很吃力,会加载不出来,可以加上备选的背景图片或者前置图片,也可以换成较小的gif。
5. h5 video自动播放,需要加playsinline属性
-
一个布尔属性,指明视频将内嵌(inline)播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的。