ヘッダー応答しない

Question

親愛なる、私は財団で初心者と私は、私は私のミスを見つけることができるように、私はあなたの提案を必要とする...媒体装置に私のコードで立ち往生していますすべて：-belowは私のコードです： -

<div class="row"> 
      <div class="large-6 medium-6 small-8 columns"> 
       <ul class="dropdown menu" data-dropdown-menu> 
        <li class=" " id="logo"><a href=""><img src="img/home/logo/logo.png"></a></li> 
        <li class=" "><a href="#">Home - Payment Result - contact information</a></li> 
       </ul> 
      </div> 
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium" > 
       <a id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a> 
      <!-- <button class="menu-icon" type="button" data-toggle></button> 
       <div class="title-bar-title"></div>--> 
      </div> 
      <div class="top-bar" id="main-menu" > 
       <div class="top-bar-right large-5 medium-6 small-4 columns" > 
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown"> 
         <li><a href="#">How does it work</a></li> 
         <li><a href="#">My order</a></li> 
         <li><a href="#"><span class="icon-cart"></span></a></li> 
         <li class="has-submenu"> 
          <a href="#"><span class="icon-face"></span></a> 
          <ul class="submenu menu vertical" data-submenu> 
           <li><a href="#">Pistachios</a></li> 
           <li><a href="#">Pistachios</a></li> 
           <li><a href="#">Pistachios</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

はここ

enter image description here

Answer 1

あなたの問題はiPadがlargeデバイスとmediumデバイスであるということである[スクリーンショットをクリックしてください]。

Zurb's documentationは言う：小

：任意の画面を。

中：640ピクセル以上の任意の画面。

大：1024ピクセル以上の任意の画面。

実際の解像度2048px x 1536pxのそれ以降のバージョンにもかかわらず、iPadの 'CSS解像度'（メディアのクエリの機能）は1024px x 768pxです。

肖像画はmedium、風景はlargeです。

上記のコードでは、medium-*はiPadでは表示されず、横向きでは.title-barと表示され、その逆も同様です。したがって、次のいずれかを行う必要があります。

1. CSSを使用している場合は、 iPad用の新しいブレークポイントを作成します（これは良いリソースです： CSS-Tricks - device media queries）

2. それとも、あなたはSASSを使用している場合、あなたは同様の内の特定のCSSを作成するために、標準 財団SASSパッケージでミックスインを再利用することができます（1）への道：

   @media screen and #{breakpoint(768px)} and #{breakpoint(1024px down)} { 
        //iPad CSS here 
       } 
   

3. large & mediumデバイスとして扱い、あなたのHTML

.top-barを変更するには、実際の一部ではありませんグリッドシステムでも.top-bar-leftと.top-bar-rightがありますが、これらを列と行でどれだけ制御できるかわかりません。

だから、これはあなたのために働くかもしれない（それは左と右のセクションの幅を制御しません）：

<div class="row"> 
    <div class="large-6 medium-6 small-8 columns end"> 
    <ul class="dropdown menu" data-dropdown-menu> 
     <li class=" " id="logo"> 
     <a href=""><img src="img/home/logo/logo.png"></a> 
     </li> 
     <li class=" "><a href="#">Home - Payment Result - contact information</a></li> 
    </ul> 
    </div> 
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium"> 
    <a id="nav-toggle" href="#" title="Navigation" data-toggle><span></span></a> 
    <!-- <button class="menu-icon" type="button" data-toggle></button> 
       <div class="title-bar-title"></div>--> 
    </div> 
    <div class="top-bar" id="main-menu"> 
    <div class="top-bar-left"> 
     <p class="show-for-large-only"> 
     ERROR 
     </p> 
    </div> 
    <div class="top-bar-right"> 
     <ul class="menu" data-responsive-menu="drilldown medium-dropdown"> 
     <li><a href="#">How does it work</a></li> 
     <li><a href="#">My order</a></li> 
     <li><a href="#"><span class="icon-cart"></span></a></li> 
     <li class="has-submenu"> 
      <a href="#"><span class="icon-face"></span></a> 
      <ul class="submenu menu vertical" data-submenu> 
      <li><a href="#">Pistachios</a></li> 
      <li><a href="#">Pistachios</a></li> 
      <li><a href="#">Pistachios</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

A JSfiddle of this code