Responsive Design funktioniert auf dem Ipad in Inspect Element, aber nicht auf der tatsächlichen Ipad-Ansicht?

Question

Ich habe eine Dropdown-Liste, die auf einem Webbrowser und responsive Design auf Google Chrome funktioniert, aber auf dem iPad funktioniert es nicht im Querformat-Modus, hier ist der Code

Ich habe versucht (Landschaft: Orientierung) { ..code hier ..} und das scheint nicht das Problem zu beheben?

Dies ist der 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> 

Dies ist der CSS-Code für das Haupt 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; 
} 

Dies ist der CSS-Code für Medienabfrage unten für:

@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

Wissen Sie, welches Modell von ipad Sie versuchen, damit zu arbeiten?

Die Browser-Interpretation der Bildschirmgröße und -anzeige des ipad ist nicht immer genau; Haben Sie versucht, die maximale Breite Ihrer Medienabfragen an die Größe des iPads anzupassen? 1024px ist immer noch ziemlich klein für ein iPad.