禁用Zoom Mobile Nav Bar

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 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;
}