Question

我已经仔细研究了这个网站上的兼容性问题，寻找这个问题的修复程序，我似乎找不到任何与我完全相同的帖子。

基本上，当我在Chrome浏览器中加载应用程序并检查所有手机大小时，它会响应并且有效。但是，当我在个人iphone中实际打开应用程序Web地址时，切换菜单不起作用。它落后于主要内容，几乎无法点击。有人可以帮忙吗？这是应用程序的链接： https://evening-stream-86674.herokuapp.com/index.html

以下是CSS文件的一部分：

* {
    box-sizing: border-box !important;
}

html {
    height: 100%;

}

body {
    background: url("../images/tree.png") no-repeat center center fixed;
    background-size: cover; 
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

}

/*my favorite lime green color #47dd1b*/



li {
    background-color: black;
}


.navbar {
    margin-bottom: 0;
    border-radius: 0 !important;
    height: 8%;
}

@media only screen and (max-width: 640px) {
    /* For mobile phones: */
li {
    width: 100%;
}

.navbar {
    width: 100%;
}

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">John Wolfe</a>
            </div>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>

            </ul>

        </div>
    </nav>

<div id="wrap">

编辑以显示更少的代码。

引导切换菜单在chrome中工作但在移动safari中加载时没有问题

0 个答案: