Question

我正在建立一个网站只是为了好玩，我需要将它设置为固定大小，这样当你放大图像时，图像不会移动，信息也不会在页面上被压扁。

Answer 1

尝试使用：

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

Answer 2

使用px而不是所有内容的百分比设置固定的高度和宽度应该可以使一切都固定。

.css_name {
  height:30px;
  width:30px;
}

<body>
  <div class="css_name">lorus ipsum</div>

如果这不起作用，可以尝试将最小高度和宽度设置为相应内容的高度和宽度。这样可以防止盒子在最小高度和宽度设置之下收缩。

.css_name {
  height:30px;
  width:30px;
  min-height:30px;
  min-width:30px;
}

Answer 3

我使用％而不是px的宽度和高度在这张照片中，我有Block px和％（imgs和文字我已经进入了px）
With px zoomed in
With % zoomed in
在所有IMGS，文本，块上使用％，但使用％有时是痛苦的我的代码示例

#leftbody {
    position: relative;
    background-color:#e6f5ff;
    width:14%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:left;
    padding:0%;
}
#rightbody {
    position: relative;
    background-color: none;
    width:84%;
    display: inline-block;
    z-index:0;
    height:100%;
    float:righht;
    padding:0%;
}   
.activebuttons2 {
            border: none;
            color: white;
            width:100%;
            padding: 10 0 10 0px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
}

Answer 4

在其他条件相同的情况下，缩放不会影响布局。

缩放的作用是更改有效的浏览器窗口分辨率。例如，如果您的窗口当前为1024 x 800，并且缩小到200％，则窗口实际上变为512 x 400（您可以通过检查控制台中的window.innerHeight来测试此窗口）。如果您有媒体查询或正在侦听调整大小事件，则会触发它们，就像用户调整其浏览器窗口大小一样。根据结果，当然布局可能会以不合需要的方式改变。

换句话说，将1024 x 800浏览器窗口缩放到200％应该不会导致除了您将浏览器窗口实际调整为512 x 400时所看到的布局更改。

即使您可以检测到缩放级别，但从用户体验的角度来看，您不应该干扰或覆盖用户的缩放选择。

话虽如此，有多种方法可以尝试检测缩放级别，例如window.devicePixelRatio。但是，没有办法陷阱。如果你谷歌搜索“检测浏览器缩放”，你可以找到其他方法。然而，这是一个滑坡。你最好设计你的应用程序，以便它在不同的分辨率下运行良好，然后让用户随意缩放。

请注意，window.screen报告的物理屏幕尺寸不受缩放影响。所以window.screen.height始终是屏幕的物理高度（不是浏览器窗口）。无论如何，你不太可能对这些信息做任何有用的事情。

如何将html网站设置为固定大小，以便在缩放时不会改变大小

4 个答案: