所以我有一个在手机上有汉堡菜单的网站。
问题在于，无论何时在小型设备上加载页面，汉堡包菜单都会在右侧的视口之外。这会导致侧滚动问题和大量空白区域。
我最初假设我写了一些导致这种情况的CSS，但经过实验，我意识到我根本不知道发生了什么。
我有问题的GIF。如果需要，我还会提供一个URL。
继承人的第一个gif
所以发生了什么事。我正在检查网页的DOM。如果您在页面上选择任何随机元素，并编辑CSS属性，则菜单会自行修复。您选择的元素或编辑的css属性无关紧要;当你进行调整时问题得到解决。
这是第二个gif
在这个gif中，问题只是通过激活一个名为农药的CSS插件来解决。农药只是在文档中添加了另一个外部css表，用蓝色概述了所有内容。请注意，即使我关闭了pesiticde，我的问题也已修复。
最后是第三个gif
这是最令人困惑的问题。它只需调整浏览器屏幕大小即可修复汉堡包图标。显然，移动用户无法做到这一点。
我真的不明白这个问题。我试图在nav元素上设置100％的宽度。我已经编写了一些javascript，当DOM准备就绪时，将css属性添加到页脚中的DIV，然后在几秒钟后将其删除。这不能解决我的问题。我很乐意提供我写的javascript，如果要求的话。
还有其他人遇到过这样的问题吗？
EDIT 这是另一个例子。我使用浏览器Blisk在多个设备上测试我的网站。看这个 https://gfycat.com/BouncyFlakyGlobefish
当我第一次加载网站时，我有汉堡菜单问题。当我告诉浏览器从另一台设备上查看网站时“说从iphone 5切换到iphone 6”时，它解决了这个问题。我对这个问题非常沮丧。
答案 0 :(得分：0)
白色部分的动画正在增加页面的宽度（将固定在右侧的汉堡包推出视图外），我不确定为什么这不能正常更新动画完成，但在正常工作之前，它似乎需要页面重新流动。
可能的CSS修复方法是添加.bodymargins{overflow:hidden}，但这可能会导致其他样式出现问题（在您的网站上未经测试）
如果这不是一个选项，你可以在加载后不久手动触发页面的重新流动（这是一个有点令人讨厌的选项，但比它被破坏更好）
答案 1 :(得分：-2)
可能是因为您正在使用媒体查询，而且您的浏览器宽度还不够小，无法在测试时触发。
如果没有，请进行媒体查询，不要使用margin-left：auto来缩小屏幕尺寸？