Question

这是我的HTML：

<div style="height:50px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Page 1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Page 2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Page 3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Page 4
    </div>

</div>

我的CSS：

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 298px;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

我的网站正文宽1200像素。网站结构似乎在不同大小的屏幕（从我检查过的计算机）和所有主要浏览器上正常工作。但是，当缩小时，在所有设备上，最右边会下降并向左下方（在第一个下方）。没有任何重大困难有没有办法做到这一点？（时间是一个问题，这就是为什么我只想要一个简单的解决方案，如果可能的话）。如果没有一种简单快捷的方法可以做到这一点，那么请不要担心，我只是保持原样。

Answer 1

简单的答案是，你不能。没有CSS调整或JS检测缩放。

Answer 2

查看此链接有关视口元标记的信息，可以通过确定观看次数width来阻止放大/缩小，所以我认为它可能对您有所帮助

Using the viewport meta tag to control layout

更新

请参阅此链接

How can I “disable” zoom on a mobile web page?

如何在缩小时防止网站结构发生变化？

2 个答案:

更新