css在ios和安卓上的兼容问题(持续更新)

1、linear-gradient渐变在ios上会出现灰底
原因:ios不支持transparent表示透明,改用rgba(255, 255, 255, 0)

background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -webkit-gradient(linear, top, bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);

2、滚动条在安卓机上不显示

// 手动写scrollbar代码
&::-webkit-scrollbar {
  background-color: #fff;
}

&::-webkit-scrollbar-thumb {
  width: 8px;
  background: #E9E9E9;
  border-radius: 5px;
}

3、font-weight属性在安卓机上100~600都显示400的字重(汉字会出现该问题,字母不会)
原因:字体不支持,建议用normal和bold来表示粗细

4、ios无法调起数字键盘的问题
type=number不生效时,可使用inputMode属性,同时存在时优先使用inputMode,值如下:
在这里插入图片描述
5、ios的placeholder偏上的问题
方法一:使用padding使提示文字居中,如果font-size:14px,UI高度为40px,我们可以设height:14px,padding:13px 0;
方法二:使用line-height:1px
方法三:使用vertical-align: middle;
实践后问题得以解决,但是其他浏览器下也受到了影响,那么问题来了,我们需要单独针对Safari来写hack即[;line-height:1;]
转:https://www.cnblogs.com/humaotegong/p/6629060.html

6、ios下固定定位在滚动元素中位置错乱的问题
将固定定位放在最外层即可

7、ios在微信公众号下无法使用dayjs插件的问题
可能原因:(1)ios本身就不支持dayjs (2)ios不支持 new Date(yyyy-MM-dd )的转换,只支持 new Date(yyyy/MM/dd )的转换

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sticky模式是一种在网页或应用程序中常见的效果,它可以使元素固定在页面的特定位置,无论滚动页面时该元素是否可见。然而,在iOS设备上,存在一些兼容性问题需要注意。 第一个兼容性问题是页面元素的容器是否支持sticky定位。在一些旧版本的iOS设备上,容器元素如果使用了transform属性或position属性为fixed时,sticky定位会失效。因此,在开发过程中,我们应尽量避免在容器元素上使用这些属性,以确保sticky定位的正常运行。 第二个兼容性问题是滚动容器的滚动方式。在某些iOS设备上,当滚动容器(例如overflow属性设置为scroll或auto的元素)内部的内容过多时,sticky元素可能会出现跳动或抖动的问题。这是因为滚动容器的滚动方式与浏览器的渲染方式有关。为了避免这个问题,我们可以尝试将滚动容器的滚动方式设置为transform或will-change属性。 第三个兼容性问题是触摸事件处理。在一些iOS设备上,滚动容器内部的sticky元素可能无法正确响应触摸事件,导致无法正常交互。这个问题可能与iOS设备的触摸事件处理机制有关,但我们可以尝试通过修改CSS代码或使用JavaScript来处理这个问题。 总的来说,sticky兼容性问题主要集中在iOS设备上。在开发过程中,我们需要注意容器元素的属性、滚动容器的滚动方式以及触摸事件的处理,以确保sticky定位在iOS设备上的正常运行。如果遇到兼容性问题,我们可以尝试使用其他定位方式或通过修改代码来解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值