Question

我有一个下拉列表，适用于网页浏览器和Google Chrome上的响应式设计，但是在ipad上它不能在横向模式下工作，这里是代码

我已经尝试过（风景：方向）{..此处代码..}并且没有＆＃39;似乎解决了这个问题？

这是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的大小？对于ipad，1024px仍然相当小。

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

1 个答案: