0

我已经访问 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

提前谢谢各位！

=======更新========

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

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

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

4

1 回答 1

0

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

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

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

于 2013-07-07T01:53:14.120 回答