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

Posted 2023-04-01 八十岁徒步环游地球

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 ）的转换

微信小程序开发之IOS/Android兼容坑（持续更新）

 

一、时间转换问题：

这不只是小程序上面的问题是ios系统 都有这个问题
就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装，解决方案如下

1.替换”-“为”/“

2.删除”.“后面的字符串（带毫秒也会有问题）

二、定位问题

整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行

三、absolute定位问题， 这不属于手机兼容问题

使用absolute定位，并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出，出现页面左右可以移动的bug，模拟器上是没有问题，但是真机上是有这个问题的。这个问题让我调试并痛苦了许久