Question

我一直在访问StackOverFlow一段时间以找到解决我遇到的问题的各种解决方案，所以我想这会是我遇到问题时发布的地方我无法找到解决方案对

我昨天更改了我网站的媒体查询，因为我终于开始添加下拉导航以防止一切变得混乱。这很有效。但现在我遇到了一个问题。

当我在S3上加载网站时，一切看起来都像我预期的那样。当我旋转到横向时，标题和导航显示，但所有页面内容都是不可见的。它就在那里......我可以“突出”我无法看到的文字并保存不显示的图像，但我看不到任何东西。我旋转回肖像，一切正常显示。

该网站是一个单页设计，并使用jQuery浏览“页面”我改变的唯一代码，为下拉菜单添加功能...

// toggle nav
$("#menu-icon").on("click", function () {
     $("#nav").slideToggle();
});

并在菜单图标可见时隐藏导航

// When a nav link is clicked  
$("a.tab").click(function () {
    // Hide Nav menu if #menu-icon is visible
    if ($("#menu-icon").is(":visible")) {
         $("#nav").hide();
    }...

我做的唯一CSS更改是设置菜单图标的样式，最初隐藏它，并在媒体查询中显示...

@media screen and (max-width: 600px) {
/*Page Elements*/

#menu-icon 
{
    display: block;
    color:#bababa;
    font-size:1.5em;
    float:left;
    margin-left:2em;
    background:url(Images/Menu.png) no-repeat 5px center;
    background-color:rgba(0, 0, 0, 0.6);
    width:110px;
    border: 1px solid #787878;
    border-radius:.35em;
    padding: .5em .5em .5em 2em;
}

所以，我的问题是，是否有人知道景观中消失的内容会发生什么？任何帮助将不胜感激。

哦，是的，一切都在iPhone，台式机，iPad等上运行良好。如果它对网站有帮助http://tapricedesigns.com

先谢谢你们！

的 ======= UPDATE ======

我在媒体查询中隔离了问题。显然，这种行为是由position:relative上的header引起的，当我将其重新定位到页面顶部时，会添加position:absolute。我不知道为什么这会在旋转手机时造成问题（也许是一个奇怪的错误？）。我将尝试创建一个仅在横向位置定位Galaxy S3的媒体查询，并使用overflow:auto在内容上添加一些样式规则以防止布局中断。一旦我的一切正常，我会再次更新。

=======更新2 ========

我现在解决了。我的容器div上没有overflow:auto，因此在重新定位所有内容之后它没有包装内容。我仍然不完全确定为什么position:relative导致header {{1}}导致Dolphin和Android浏览器中的显示无效，但它现在有效，所以我想我会在我领先时退出。谢谢！

Answer 1

只是为了给您一个有效且适用的答案 ......

请在手机上的多个浏览器中进行测试。

另外，我会尝试调整主页内容的overflow，whitespace和z-index值以及导航菜单的float值。

网页内容在Android环境中不可见

的 ======= UPDATE ======

=======更新2 ========

1 个答案: