レスポンシブデザインはIpadのInspect Elementでは動作しますが、実際のIpadビューでは動作しませんか？

Question

ウェブブラウザとレスポンシブなデザインのGoogle Chromeで動作するドロップダウンリストがありますが、ipadではランドスケープモードでは機能しませんが、コードは

です{landscape：orientation} { ..ここにコード..}それは問題を解決するようではありませんか？

これは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ではかなり小さいです。