Question

我制作了一个严格移动的网站，其中包含导航栏和缩放图片。每当我放大网站以使图片变大时，导航栏将随其中的文本一起增长。任何人都知道如何阻止导航栏缩放？这是CSS：

#navBarMobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 174px;
    background-color: rgba(0, 0, 0, 0.63);
    z-index: 2;
}

Answer 1

您可以使用以下 meta 标记添加以下 meta 标记的方式：

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

但这也使图像无法缩放。没有其他方式您的用户无法缩放网站，因此导航栏。

This帖子可能有用。

Answer 2

您可以使用视口相对单位vh和vw代替％，px，pt来设置导航样式。大小，边距，字体，阴影，边框等属性都可以采用视口的相对单位，并且如果设置正确的样式，它们似乎会忽略缩放。

{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;     //use vw 
    height: 3vh;      //use vh
    font-size: 2.5vh;  //use this for fonts and other properties
    background-color: rgba(0, 0, 0, 0.63);
    z-index: 2;
}

禁用Zoom Mobile Nav Bar

2 个答案: