HTML 禁止在移动端缩放

HTML About 1,011 words

需求

禁止网页在Android、iOS、平板等设备中缩放，导致元素大小不一致。

方法

添加viewport，设置缩放属性。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <div>
        this is very long text this is very long text this is very long text this is very long text this is very long
        text
    </div>
    <div>
        this is very long text this is very long text this is very long text this is very long text this is very long
        text
    </div>
    <div>
        this is very long text this is very long text this is very long text this is very long text this is very long
        text
    </div>
</body>

</html>

Views: 2,373 · Posted: 2021-06-23

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓