一、移动端
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取值...
这个方法没有做多机型测试,就...