移动问题-网站未正确检测屏幕大小

时间:2019-08-20 作者:figure2

我的问题涉及此网站(当前在我的临时服务器上):https://sunstonebookkeeping.markhannondesign.com

该主题是我用下划线和引导创建的父主题的子主题。当我在手机上查看网站时,我有一些奇怪的行为。请参见下面的屏幕截图。

Screenshot from Chrome Developer tools

如果我单击菜单中的另一个页面,网站会自动更正并正确地显示在屏幕上。然而,当我将手机切换到横向时,会加载全尺寸桌面版本。同样,当我单击菜单中的另一个页面时,网站会调整自身大小以适合屏幕。

知道是什么原因吗?

1 个回复
最合适的回答,由SO网友:Valentin Genev 整理而成

主菜单容器设置为left: 5000px; witch扩展页面宽度。您可以在中找到此样式指令。。。主题/sunstone簿记/css/手机。css第66行。

@media screen and (max-width: 600px)
.nav-menu {
    position: absolute;
    left: 5000px;
}
解决此问题的一种方法是向父元素添加以下样式:

.menu-menu-1-container {
    position: relative;
    overflow-x: hidden;
}
此解决方案不应与其他样式混淆。

下面介绍了应用此类更改的正确方法:child themes. 在style.css 您可以安全地添加我提出的解决方案。干杯

相关推荐

Disable Top Nav Bar on Mobile

我创建了一个网站(www.smartgrowtheconomics.com),使用2017年的主题加上一些额外的CSS,在桌面和平板电脑上看起来不错,但在智能手机上始终显示蓝色下拉菜单和搜索栏。我试过一些CSS,包括.导航顶部{显示:无;}和.主导航{可见性:隐藏;}但无法删除栏、菜单和搜索栏。我不知道JS,但我以前用说明粘贴过代码片段。谢谢