微信小程序圆角苹果手机不兼容

最新推荐文章于 2023-12-19 19:56:06 发布

゛Pudding

最新推荐文章于 2023-12-19 19:56:06 发布

阅读量892

点赞数 1

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_41408685/article/details/108635627

版权

小程序专栏收录该内容

24 篇文章

订阅专栏

本文主要探讨了微信小程序中遇到的一个兼容性问题，即安卓设备上使用border-radius实现的圆角效果在苹果手机上无法正常显示。为解决此问题，提出了在苹果手机上需要额外添加特定样式的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安卓手机圆角的正常操作就是直接border-radius：3rpx;
2、苹果手机圆角却不显示，需要加以下样式：

.box{
	border-radius: 6rpx;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

゛Pudding

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

兼容uniapp在小程序端IOS圆角不生效的问题

Z.Dragon 的博客

09-14

1370

/* 兼容IOS圆角 */ .br { -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); }

uni-app小程序生成海报，支持各种机型

学而时习之，不亦说乎。

08-09

1104

效果演示源码发布在插件市场了 https://ext.dcloud.net.cn/plugin?id=586 或者 gitee： https://gitee.com/huangchunhongzZ/poster 使用方法（主要看pages/hch-poster页面的例子里面有详细说明） <hchPoster ref="hchPoster" @cancel="canvasCancel" :simpleFlag="simpleFlag" :posterBgFlag="posterBgFla

参与评论您还未登录，请先登录后发表或查看评论

微信小程序设置swiper圆角在ios上失效解决

Martin的博客

08-19

1954

微信小程序设置swiper圆角在ios上失效解决

小程序实现圆点边框解决 dotted不兼容 小程序圆点边框兼容问题如何在小程序实现兼容的圆点边框

Taurus_666

05-28

1091

先上效果图由于业务需要，需要做一排圆点，实现方法有很多，在此记录一下另一种实现方式。最终效果：效果前提由于仅仅做小程序，而且使用了weUI样式，其中有一个徽章badge，突然奇想用徽章badge做一排圆点，在badge wxss中修改你需要的背景色，字体颜色同背景色即可。 <mp-badge content="8" style="margin-left: 10px;"/> <mp-badge content="8" style="margin-left: 10px;

苹果手机圆角兼容问题

weixin_47969233的博客

02-03

380

苹果手机圆角兼容问题苹果手机上当使用圆角+overflow，遮罩不起效的时候，在后面跟上 -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);

微信小程序IOS系统bug border-radius圆角和 overflow:hidden 溢出隐藏失效的问题

Youyzq的博客

11-23

3731

问题父元素使用border-radius和overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。或者子级元素是一个image图片格式的，overflow：hidden同样也会失效解决方法父元素设置以下两个属性 -webkit-backface-visibilit

iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

01-19

微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。 1. 安全区域是什么意思？想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域...

小程序对IPhone全面屏手机底部黑线的安全区域处理

weixin_45815859的博客

05-02

3551

今天在对自己写的小程序项目进行优化时发现全面屏手机拥有底部黑线时候在app.js内定义的tabbar不会受到影响但是在部分页面内自己手写的底部tabbar会被黑线挡住内容立马去查了下API。发现了其中一种解决方式话不多说贴代码如果还有其他更优的方法欢迎留言或者私信（第一次发博客有点害羞羞） 1、安全区域首先先了解一下安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内...

兼容iphone(ios)圆角（border-radius）不起作用的问题

Min_nna的博客

11-13

2470

该问题出现主要是因为ios中使用transform导致,可在期望设置overflow: hidden;的元素上(当前例子即.swiper-outbox)设置。当轮播图中,将属性设置在父级,每个图片都有border-radius,这样显得不美观.

小程序轮播图在ios上圆角问题

jiangyue2694的博客

08-25

1014

小程序轮播图在ios上圆角问题 微信小程序的轮播图要实现圆角我们基本上就是直接使用 border-radius: 30px; 这个就好了，但是在swper上使用这个的时候，有时候不生效，这个时候，我们可以在swper外面写一个父元素这个时候我们可以使用 overflow: hidden; 这个用上之后，就可以看到圆角已经生效了，手机上也没有问题了这个时候不要高兴的太早，ios对这个还没有兼容先去看看ios上有没有问题如果ios滑动的时候还是直角的话，那么你就直接在swper 上，或者是swp

微信分享ios设备没有分享图标安卓有分享图标（分享功能没有问题）

weixin_30885111的博客

09-28

798

解决方案：去除 var sharedata = { title: $("#shareTitle").val(), desc: $("#shareContent").val(), imgUrl: $("#shareIcon").val(), link: $("#rq1...

iOS10适配设置图片圆角的问题

jijiji000111的专栏

09-18

3186

网络请求库：AFNetWorking 网络图片处理库：SDWebImage 我们的项目在升级完XCode8后，发现有的圆角图片是不能显示的，但是在XCode的View UI Hierarchy工具中查看图层，是存在这个UIImageView控件的，这个是真机上的界面显示。这个是View UI Hierarchy工具看到的效果。首先我是使用co

canvas画的文字在安卓移动设备上可以显示，但是在ios移动设备上无法显示

weixin_30951389的博客

12-19

637

不用担心iOS Safari不支持canvas，查看https://caniuse.com/发现是支持的 ctx.font = "0.16rem Arial"; 为了适配移动端直接用了rem，但是iOS Safari只支持标准的canvas，标准的canvas只支持px不支持rem，所以文字不显示。解决方案是换成px var clientWidth = d...

小程序Canvas绘制时安卓和iOS的坑

UnendingHorse789的博客

03-31

2082

小程序的安卓和iOS的坑使用Canvas绘制时，测试中发现iOS和开发环境中使用正常的CanvasContext.setFillStyle(‘transparent’)方法，在安卓机中无法正常使用，会导致Canvas绘制的内容无法正常显示，显示内容为空白图。具体代码如下： /** 绘制圆角矩形Canvas */ roundRect(ctx, x, y, w, h, r) { // 开始绘制 ...

canvas arc画圆遇到的问题

Sayesan的专栏

08-28

2755

function drawTop(ctx, fillStyle){ ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0, 0, 30, 0,Math.PI,true); ctx.closePath(); ctx.fill(); } function draw(){ var c

解决微信小程序中使用canvas生成海报，安卓机可以，部分ios机型生成图片空白

Hgh_1997的博客

11-22

2969

我们使用canvasToTempFilePath()这个方法去生成临时路径的时候有的ios机型会出现空白的图片路径。比如iPhone6的机型（目前仅发现该机型生成失效）下图是iPhone6中用小程序canvasToTempFilePath() 生成的临时图片路径 ================================================= 2.这一张是iPhone11中小程序canvasToTempFilePath()生成的图片---完成没问题，长按也可以保存 ps：笔者用了P

微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示