メディアクエリのランドスケープが動作しません

Question

私は、フルスクリーンのコンピュータサイズとポートレートとランドスケープサイジングに対応したアプリケーションを電話機で作成しようとしています。私はフルスクリーンとポートレートのサイズ変更を行うことができますが、私がランドスケープに切り替えると、ランドスケープCSSのメディアクエリは機能しません。何が起こっているかについてのアイデア？ここに私のCSSは次のとおりです。

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) { 
     .landing-header { 
      margin-top: 18%; 
     } 
     .landing-h { 
      font-size: 145px; 
     } 
     .auth-box { 
      position: absolute; 
      top: 58%; 
      left: 35%; 
      margin-left: -15rem; 
      margin-top: -26.5rem; 
      width: 60rem; 
      height: 80rem; 
      overflow: hidden; 
     } 
     .user-auth { 
      padding-top: 35%; 
     } 

     .greeting { 
     margin-top: 6%; 
     margin-left: 7%; 
     font-size: 35px; 
     text-align: center; 
     } 

     .login-form, .register-form { 
      font-size: 40px; 
     } 


     .login-form input, .register-form input { 
      margin: 3%; 
     } 

     .landing-button { 
      margin: 2%; 
      width: 50%; 
      font-size: 60px; 
     } 
} 

@media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { 
     .landing-header { 
      margin-top: 9%; 
     } 
     .auth-box { 
      position: absolute; 
      top: 98%; 
      left: 35%; 
      margin-left: -22rem; 
      margin-top: -26.5rem; 
      width: 72rem; 
      height: 20rem; 
      overflow: hidden; 
     } 
     .greeting { 
      margin-left: 34%; 
      margin-top: 2%; 
      margin-bottom: 1%; 
      font-size: 16px; 
      text-align: center; 
} 
    } 
     .user-auth { 
     padding-top: 9%; 
    } 
    .landing-button { 
     margin: 0%; 
     width: 12%; 
     font-size: 16px; 
} 
    .login-form, .register-form { 
      font-size: 18px; 
     } 
     .login-form input, .register-form input { 
      margin: 2%; 
     } 


@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { 
    .auth-box { 
     width: 61rem; 
     height: 18rem; 
     top: 95%; 
     left: 40%; 
     height: 23rem; 
    } 
    .landing-button { 
     font-size: 20px; 
     width: 18%; 
     margin: 1%; 
    } 
    .greeting { 
     margin-left: 30%; 
     margin-top: 2%; 
    } 
    .login-form input, .register-form input { 
      margin-top: 6%; 
      margin-bottom: 1%; 
     } 
} 

Answer 1

OK、私はあなたを噛んだものを見ると思います。私がコメントで指摘した最大値と最小値に加えて、やや直感的には、縦横両方向に同じ幅の高さ値&を使用する必要があります。したがって、iPhoneのようなデバイスは、デバイスの高さよりもデバイスの幅が小さいため、「ネイティブ」の向きは縦向きです。風景モードの幅のメディアクエリをあなたがポートレートのために持っているものとマッチさせると、それはあなたが望むことを行う可能性が高いでしょう。