开发过程遇到的css样式问题记录

一、移动端

1.部分安卓机圆角border-radius失效，显示为方形状？

　　  background-clip: padding-box;  

 2.部分安卓机字体图标出现锯齿？

　　使用iconfont图标时，小米8机型出现锯齿。

　　也可解决字体不清晰。

　　  -webkit-font-smoothing: antialiased;  

　　  -moz-osx-font-smoothing: grayscale；    

3.安卓机devicePixelRatio值较大，图片显示模糊

　　使用2X图

　　背景图设置：   background-size: contain; 

4.上下滑动时卡顿、慢

body {
     -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
}

5.禁止选中/复制文字

　　需要加上浏览器前缀。

    -webkit-user-select: none;
    moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

6.长时间按住页面开始闪动

　　  -webkit-touch-callout: none; 

7.Iphone机的输入框出现内阴影

　　  -webkit-appearance: none;  

8.触摸元素时出现半透明灰色遮罩

　　  -webkit-tap-highlight-color: rgba(255,255,255,0) 

9.Retina屏的1px边框

　　请 bing一下关键字，解决方式不一。

　　在微信小程序中我使用1rpx居多，安卓机和果机粗细差别大时使用伪代码::after

.item::after {
    content: '';
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2rpx solid #e5e5e5;
    transform: scale(0.5);
    transform-origin: 0 0;
    z-index: 0;
}

 

10. 可以用css动态计算元素高度

　　设计稿以750px为准。

　　  height: calc(100%-97/750);  

　　动态计算高度还是用JS比较稳妥。

11.文字加粗

　　无法加粗的情况下可使用字体阴影。

　　  text-shadow: 0px 0px #000;  

12.两端字体设置情况

　　果机设置字体："PingFang SC" ，支持字重100至900粗细；

　　安卓机设置字体："Noto Sans CJK"(思源黑体中日韩)(Noto Sans 字体)，支持字重400和700粗细、其他无；　　

    

　　(@_@;)

13.移动端边框线粗细显示不一样？

　　根据移动端视网膜屏devicePixelRatio值不同，1px产生的边框线粗细程度不一样，可以用伪类元素解决。

    .border {
        &::after {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0;
            top: 0;
            transform: scale(0.5);
            transform-origin: 0 0;
            box-sizing: border-box;
            border-radius: 16rpx;
            border: 2rpx solid #eee;
            z-index: 1;
        }
    }

14.IOS显示日期格式的兼容问题?

　　 '2019-12-12 00:00:00' 格式无法识别会被显示为NaN，可将 - 替换为 / ， str.replace(/\-/g,"/") 

　　正确格式：

　　 '2019/12/12 00:00:00'  两端兼容良好；

　　显示长度为19位，超出可截取  str.substring(0,19) 。

　　┭┮﹏┭┮

 

~~~~~~~~~~~~~~ 2020-08-21更新 ~~~~~~~~~~~~~~

15.圆角在高清屏显示问题

　　小程序中圆角大小显示不一致，有一个方法可用（待验证）

　　例如：圆角大小是10像素，小程序中写5px，不用rpx

　　就是除2取值...

　　这个方法没有做多机型测试，就...