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">
相关推荐
游九尘11 小时前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app
2501_9160074712 小时前
前端开发常用软件与工具全面指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090616 小时前
iOS应用性能优化:十大策略提升用户体验与开发效率
android·ios·小程序·https·uni-app·iphone·webview
万能小林子1 天前
如何将网页在线转APP?5种打包工具对比速成指南(含在线/手机/电脑方案)
android·ios·uni-app·web app·wap2app·app打包·app封装
雪芽蓝域zzs2 天前
uni-app原生editor封装编辑组件(vue3)
uni-app
felipeas3 天前
uni-app day1
uni-app·notepad++
前端后腿哥3 天前
UNIAPPX UTS插件Widget开发完整教程(Android版)
前端·uni-app
黄同学real4 天前
uni-app 真机调试:手动代理环境下访问内网 API 的解决方案
uni-app
Hoshizola4 天前
uniapp与蓝牙设备连接详细步骤
前端·uni-app
优雅格子衫4 天前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue