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

Question

​

我正在为http://briannabaldwinphotography.com/建一个咯咯笑的网站。我的移动菜单按钮不会离开display:none在我的iphone景观模式的狩猎旅行，虽然它在Chrome在我的手机上工作。我想要#菜单按钮显示时，设备是低于500便士，并消失当它是超过500便士。菜单按钮是通过jquery添加的，id为#menu-button。如果您使用dev工具并查看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将解决按钮隐藏问题，也解决了我们在上次评论中谈到的问题。

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

Answer 2

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

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

纵向来看，iPhone 5宽320 6+，iPhone 6宽375 6+，iPhone 6+宽414 6+。所以所有这些手机都不应用你的"css_tablet.css“样式表的css。

所以这并不是电话/平板电脑特有的。