html - 移动浏览器不支持宽度 100%？

Question

这个问题之前有人问过here和 here但我找不到合适的答案

我不想更改默认视口(viewport)，因为除了我的页脚之外的其他所有内容都可以很好地缩放。奇怪的是，我有一个固定位置的菜单<div>一直接受 width: 100%值(value)。

我试过了width: 100% , width: 100vw , 和 width: inherit .出于某种原因，我网站上的一些全宽图像无法与 width: 100% 一起使用。 , 但当我使用 width: inherit 时宽度正确.

有没有一种解决方案可以让我不必更改我没有想到的视口(viewport)大小？

我的菜单 <div>哪个工作正常:

#navbar {

    z-index: 5;
    width: 100%;
    padding: 10px 0px 10px 25px;
    background-color: #1391cb;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 4px solid #3a3a3a;

}

我必须正确缩放的图像:

@media only screen and (max-device-width: 480px) {

    #main-content, #main-content-overlay {

        width: inherit;

    }

}

此外，我网站的某些页面在移动设备上也能完美运行。没有明显的模式可以做什么，哪些不可以。一些可用的页面包含的内容超过设备的高度，而另一些则不然。我的页面都没有以任何方式、形状或形式超过视口(viewport)的宽度。

Answer 1

我见过 width:100% 被忽略的唯一情况是父容器没有设置宽度。