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

Question

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

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

我尝试过width: 100%、width: 100vw 和width: inherit。出于某种原因，我网站上的几个全角图像不适用于width: 100%，但在我使用width: inherit 时呈现了正确的宽度。

是否有一个解决方案，我不必更改我没有想到的视口大小？

我的菜单<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;

    }

}

此外，我网站的某些页面可以在移动设备上完美运行。没有可辨别的模式，哪些做，哪些不做。一些可以工作的页面的内容超过了设备的高度，而另一些则没有。我的页面都没有以任何方式、形状或形式超过视口的宽度。

Answer 1

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