无法显示：无我的移动菜单按钮

Question

我正在建立一个咯咯笑的网站http://briannabaldwinphotography.com/。我的手机菜单按钮在我的iphone横向模式下无法在Safari中使用display:none，但它可以在手机上的Chrome中使用。我想＃menu菜单按钮显示设备何时低于500px，当它高于500px时消失。菜单按钮通过jquery添加，ID为#menu-button。如果您使用开发工具并查看css_tablet.css的来源，那么我会看到#menu-button设置为display:none。任何建议都非常感激。

$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
    $("#menu").toggle();
});
$("li").click(function(){
    $("ul").hide();
});

Answer 1

添加此CSS -

@media screen and (min-width: 500px) {

    #menu-button {
        display: none;
    }
    #menu.js{
        display: block !important;  // You must have to use '!important' as javascript adding inline style on the menu (display block/none)
    }
}

上面的CSS将解决Button隐藏问题以及我们在上次评论中讨论的问题。

为了更好地了解不同设备的媒体查询。看看这篇文章 - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

在“css_tablet.css”中，所有css都在媒体查询中定义，该查询仅应用于最小宽度为500px的屏幕。

@media screen and (min-width: 500px) {
  #menu-button {
    display: none;
  }
  ... more css ...
}

在纵向视图中，iPhone 5为320px宽，iPhone 6为375px，iPhone 6+为414px。所以这些手机都没有应用你的“css_tablet.css”样式表中的css。

所以它不是手机/平板电脑特有的。