移动端的问题搜集

# 边框宽度为0.5px

1.直接写0.5px，不兼容。
2.transform的scale。
3.linear-gradient，渐变。
4.SVG。
5.box-shadow。
6.meta中的viewport。

上述方案中效果最好，最常用的是transform的缩放

原理就是利用伪元素，伪元素本身的宽高是原 div 的两倍，边框为 1px，再用 transform: scale(0.5) 缩小

     
        .box1 {
            background: none;
            margin-top: 10px;
            margin-left: 200px;
            height: 100px;
            width: 100px;
            border: 0.5px solid #000;
        }

        .box2 {
            position: relative;
            margin: 10px 0 0 200px;
            border: none;
            background: none;
            height: 100px;
            width: 100px;
        }

        .box2::after {
            content: '';
            position: absolute;
            border: 1px solid #000;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: left top;
        }

    <div class="box"></div>
    <div class="box1"></div>
    <div class='box2'></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 防止手机中页面放大和缩小

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

1
2

#JavaScript

最近更新时间： 2022/09/28 16:26:36