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">
相关推荐
哆啦A梦15885 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
2501_915918417 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
2501_9151063217 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
快起来搬砖了17 小时前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
数学分析分析什么?17 小时前
Uniapp中使用renderjs实现OpenLayers+天地图的展示与操作
uni-app·openlayers·天地图·renderjs
海绵宝宝不喜欢侬17 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
Python大数据分析19 小时前
uniapp微信小程序商品列表数据分页+本地缓存+下拉刷新+图片懒加载
缓存·微信小程序·uni-app
机构师19 小时前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
小白_ysf19 小时前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
imHere·19 小时前
UniApp 分包异步化配置及组件引用解决方案
微信小程序·uni-app·分包