デスクトップビュー（ランドスケープ）でモバイル固有のメディアクエリ（ランドスケープ）を実行しないようにする

まず、問題のタイトルを記述することは本当に申し訳なく思っています。なぜ私はそのようなタイトルを使用したのですか？デスクトップビュー（ランドスケープ）でモバイル固有のメディアクエリ（ランドスケープ）を実行しないようにする

今私はメディアクエリを使用していますが、私は練習プロジェクトでその応答性を利用しており、そのプロジェクトにオリエンテーションロックを適用したいと考えています。同様に、プロジェクトはモバイルポートレートビューでは互換性がありますが、モバイルランドスケープビューでは使用できません。

オリエンテーションロックに次のコードを適用しましたが、ブラウザウィンドウのサイズが変更され、画面解像度に一致するとロックが適用されるという問題があります。デスクトップビューにロックを適用したくない。

device-widthを使用する方法がありますが、これはmozillaによって廃止されました。ですから、min-widthなどでこの問題を解決する方法はありますか？

理解できない場合は教えてください。

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/> 
    <style> 
    #div-2{ 
    display:none; 
    } 
    @media screen and(min-width:320px) and (orientation:landscape){ 
    #div-1{ 
    display:none; 
    } 
    #div-2{ 
    display:block; 
    } 
    } 
    </style> 
</head> 
<body> 
    <div id="div-1"><p>Orientation lock not applied.</p></div> 
    <div id="div-2"><p>Orientation lock applied.</p></div> 
</body>

出典

2016-11-30 Lalit Pal

申し訳ありませんが、私の友人。あなたが共有している投稿は私の質問によるものではありません。 –

方向モードが横向きのときにdiv-1を表示しますか？ –

はい私は、ランドスケープビューがデスクトップベースの場合、div-1をランドスケープビューで表示します。しかし、モバイルのランドスケープビューでは、div-1が消えてdiv-2が表示されます。 –

[OK]を私はコードを置き換え、今理解し、これはあなたのために有用であると思います：

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> 
    <style> 

     @media screen and (min-width: 320px) and (orientation:landscape) { 
      #div-1 { 
       display: block; 
} 
#div-2 { 
       display: none; 
} 
} 
@media screen and (min-width: 961px) and (orientation:landscape) { 
#div-2 { 
display: none; 
} 
#div-1{ 
display:block; 
} 
} 
</style> 
</head> 
<body> 
    <div id="div-1"> 
<p>Orientation lock not applied.</p> 
</div> 
<div id="div-2> 
     <p>Orientation lock applied.</p> 
</div> 
</body> 
</html>

出典

2016-11-30 12:20:44

申し訳ありませんが、私の友人。あなたの答えは私にとってはうまくいかなかった。あなたと他の人に私の質問を正しく説明できないかもしれません。本当に残念ですが、もう一度説明しようと思います。ウェブページがモバイルデバイスの横向きのビューにあり、デスクトップの横向きのビューに表示されていない場合は、「div-2」が表示されます。デバイス幅プロパティを使用して私の問題に対処する方法がありますが、mozillaはそのプロパティを非推奨にしており、それ以上使用しないことを推奨しています。だから、私はこの問題をmin-widthまたはheightを使って解決する方法があるのか知りたいのですか？ –

私は奇妙なことがないと思います。

@media only screen and (min-width:320px) and (orientation:landscape) { 
     #div-1 { 
      display: none; 
     } 

     #div-2 { 
      display: block; 
     } 
    }

デスクトップが含まれています

あなたはこのメディアクエリを記述します。したがって、デスクトップのdiv-1はhideでdiv-2が表示されます。

あなたはこのメディアクエリーは唯一のモバイルのために働くたい場合は、最大幅

あなたは（デスクトップ）欲しいものよりも大きな画面をフィルタリングする使用する必要があります。スタイルはデスクトップ用ではありません。このメディアクエリーは、ブラウザのサイズ上で動作し、ブラウザの幅の独立したいくつかのデバイスサイズをフィルタリングしたい場合は、このメディアクエリを使用する必要があります。

@media only screen and (max-device-width: 320px)

出典

2016-11-30 12:56:22

かなり正しいですが、ブラウザウィンドウのサイズ変更の問題についてはどうですか？誰かが自分のブラウザウィンドウ（サイトの応答性を確認するために主に使用する）のサイズを変更し、特定の幅になると500pxとした場合、メディアクエリが実行されます。しかし私はそれを望んでいません。モバイルデバイス専用に実行したい –

デバイスの幅だけで動作する 'max-device-width'を使うことができます。ブラウザのサイズには違いはありません。ブラウザのサイズ変更によってメディアクエリが実行されません。 –

私は自分の答えを編集しました。 –

デスクトップビュー（ランドスケープ）でモバイル固有のメディアクエリ（ランドスケープ）を実行しないようにする

答えて

関連する問題