响应式设计适用于 Ipad 中的 Inspect Element，但不适用于实际的 Ipad 视图？

Question

我有一个可在网络浏览器上使用的下拉列表和谷歌浏览器上的响应式设计，但是在 ipad 上它不能在横向模式下使用，这里是代码

我已经尝试过（横向：方向）{..code here..}，但这似乎没有解决问题？

这是 HTML：

    <div id="logo">
        <a id="goUpmobile" href="/"></a>
    </div>

    <nav id="menu">
        <ul>
            <li <?php if ($thisPage=="propmanagement") echo " class=\"active\""; ?>><a href='propmanagement.php'><span>PROPERTY MANAGEMENT</span></a></li>
           <li <?php if ($thisPage=="residental") echo " class=\"active\""; ?>><a href='residental.php'><span>RESIDENTIAL</span></a></li>
           <li <?php if ($thisPage=="commercial") echo " class=\"active\""; ?>><a href='commercial.php'><span>COMMERCIAL</span></a></li>
           <li <?php if ($thisPage=="neighborhoods") echo " class=\"active\""; ?>><a href='neighborhoods.php'><span>NEIGHBORHOODS</span></a></li>
           <li <?php if ($thisPage=="company") echo " class=\"active\""; ?> class='has-sub'><a href='company.php'><span>COMPANY</span></a></li>
           <li <?php if ($thisPage=="contact") echo " class=\"active\""; ?> class='last'><a href='contact.php'><span>CONTACT</span></a></li>
        </ul>
    </nav>

这是主 css 的 CSS 代码：

#mobile-nav {
display: none;  
}

.menu-nav {
background:url(../img/menu-mobile.png) 0 0 no-repeat;
width: 16px;
height: 16px;
display: block;
margin: 22px 0 0 0;

-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);

-webkit-transition: -webkit-transform 250ms ease-out 0s;    
   -moz-transition: -moz-transform 250ms ease-out 0s;
     -o-transition: -o-transform 250ms ease-out 0s;
        transition: transform 250ms ease-out 0s;
}

.menu-nav.open {
background-position: 0 -16px;

-webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
     -o-transform: rotate(-180deg);
        transform: rotate(-180deg);

-webkit-transition: -webkit-transform 250ms ease-out 0s;    
   -moz-transition: -moz-transform 250ms ease-out 0s;
     -o-transition: -o-transform 250ms ease-out 0s;
        transition: transform 250ms ease-out 0s;    
}

#navigation-mobile {
display: none;
text-align: center;
width: 100%;
background: rgba(65, 195, 211, 0.9); 
border-bottom: 1px solid #FFF;
position: relative;
float: left;
z-index: 9999;
margin-top: 16px;
}

#navigation-mobile li {
list-style: none;
border-top: 1px solid #FFF;
}

#navigation-mobile li a{
display: block;
font-size: 16px;
text-transform: uppercase;
padding: 20px 0;
}
#navigation-mobile ul{
margin: 0 0 0px 0px;
}

这是以下媒体查询的 CSS 代码：

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
#menu {
    display: none;  
}

#menu-nav-mobile {
    margin: 0;
}

#mobile-nav {
    display: block;
    float: right;
}

#mobilemenu{
    display: block;
}

header .sticky-nav #mobile-nav,
header .sticky-nav.stuck #mobile-nav {
    margin-right: 20px; 
}

header .sticky-nav {
    position: relative; 
}

header .sticky-nav.stuck #menu {
    margin-right: 20px; 
}

#menu-nav-mobile {
    margin: 0;
}

#navigation-mobile {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px; 
    display: block;
}

#navigation-mobile li a {
    font-size: 14px;
    padding: 12px 0;
}


}

Answer 1

你知道你想让它在哪个型号的 ipad 上工作吗？

浏览器对 ipad 屏幕尺寸和显示的解释并不总是准确的；您是否尝试过更改媒体查询的最大宽度以适应 ipad 的大小？ 1024px 对于 ipad 来说还是很小的。