移动端兼容性问题
# 移动端兼容性问题
# 解决小程序图片闪动变形问题
- 如果设置了
widthFix,则手动将height调整为auto; - 如果设置了
heightFix,则手动将width调整为auto;
<style lang="scss">
.widthFix {
height: auto;
}
.heightFix {
width: auto;
}
</style>
<image
class="widthFix"
mode="widthFix"
src="http://clouds.guowei.link/blog/1.jpg"
/>
<image
class="heightFix"
mode="heightFix"
src="http://clouds.guowei.link/blog/1.jpg"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 解决移动端 1px 问题
.div::after {
content: "";
box-sizing: border-box;
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 300%;
height: 300%;
border: 1.5px solid #bfbfbf;
transform: scale(1/3);
transform-origin: left top; /*缩放原点*/
border-radius: 6px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 手机端表单元素的默认外观重置
.input {
-webkit-appearance: none;
}
1
2
3
2
3