分辨率变化，页面固定不缩放禁止页面缩放

最新推荐文章于 2024-06-27 16:30:42 发布

麦乐乐

最新推荐文章于 2024-06-27 16:30:42 发布

阅读量6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41831345/article/details/80676249

版权

<meta name="viewport" content="width=device-width,user-scalable=no"/>

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

如果不想让页面缩放，可以直接 user-scalable = no

会出现下面效果

当分辨率辩护时，页面固定大小不会一直缩放

如果不加这个属性，会是下面的效果

整个页面会跟着一起缩放

简单demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      min-width: 2000px;
      height: 500px;
      background: url('https://gw.alipayobjects.com/mdn/rms_2646e9/afts/img/A*9aNWQ7nnNEYAAAAAAAAAAAAAARQnAQ') no-repeat center/cover;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

需要设置你想要的不缩放的宽度，也就是最小宽度。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麦乐乐

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分辨率变化，页面固定不缩放禁止页面缩放

&lt;meta name="viewport" content="width=device-width,user-scalable=no"/&gt;width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maxi...
复制链接

扫一扫