uniapp编译H5解决ios的border-radius失效问题,以及ios满屏显示不全的问题

1.解决方案

javascript 复制代码
	.card-itemA {
			width: 650rpx;
			height: 326rpx;
			box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
			background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 60rpx;
			overflow: hidden;
			// 兼容ios的圆角问题
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
	}

2.效果

3.ios满屏显示不全底部会被遮挡

javascript 复制代码
page {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
其他盒子也是适用这个方法的

index.html

javascript 复制代码
 <meta name="viewport"
	    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
相关推荐
会一丢丢蝶泳的咻狗9 分钟前
uni-app安卓端强制更新apk包
android·前端·uni-app
iOS阿玮2 小时前
苹果审核被拒,其实可以靠回复也能过审
uni-app·app·apple
程序员小刘10 小时前
HarmonyOS 5中UniApp的调试步骤
华为·uni-app·harmonyos
饭啦啦12 小时前
uniapp音乐播放createInnerAudioContext
uni-app
米粒宝的爸爸14 小时前
uniapp中vue3 ,uview-plus使用!
前端·vue.js·uni-app
狂龙骄子21 小时前
uniapp Switch控件背景颜色自定义
css·uni-app·switch·hbuilderx·colorui
qq_4244091921 小时前
uniapp的app项目,在华为pad上运行,页面显示异常
uni-app
涛々21 小时前
uniapp-vue3-js-vite-pinia-eslint 快速开发模板
javascript·uni-app·uniapp+vue3模板
三天不学习1 天前
使用Cursor + Devbox + Uniapp 一站式AI编程开发移动端(App、H5、小程序)
小程序·uni-app·ai编程
Q_Q5110082851 天前
python+django/flask+uniapp宠物中心信息管理系统app
spring boot·python·django·flask·uni-app·node.js·php