CSSセクション
まず、判断のために新しいクラスを作成し、メディアクエリを使用して、このクラスのZインデックス属性に異なる値を割り当てます。このクラスはJavaScriptの読み取りとしてのみ使用されるため、視聴者が予期しない状況を避けるために見えないように、画面ウィンドウから移動する必要があります。
デモンストレーションとして、次のコードでは、デスクトップ通常バージョン、小さな画面デスクトップバージョン、タブレットバージョン、モバイルバージョンの4つのデバイスステータスを設定します。
/ *デフォルト状態 */。state-indicator {position:absolute; TOP:-999EM;左:-999EM; z-index:1;}/ * small desktop */@media all and(max-width:1200px){.state-indicator {z-index:2; }}/ * tablet */@media all and(max-width:1024px){.state-indicator {z-index:3; }}/ *携帯電話 */@メディアAll and(max-width:768px){.state-indicator {z-index:4; }}JavaScriptの判断
CSSはすでに導入されているため、JavaScriptを使用して一時的なDOMオブジェクトを生成し、対応するクラスを設定し、このオブジェクトのZインデックス値を読み取る必要があります。ネイティブライティング方法は次のとおりです。
// state-indicator elementvar indicator = document.createelement( 'div'); indicator.classname = 'state-indicator'; document.body.appendChild(indicator); //デバイス状態機能getDevicestate(){return parseint(window.getcomputedExtyle(indicer).getcomputedestyle( '-indexproperterty) 10);} getDevicestate()関数はz-indexの値を返します。読みやすさを向上させるために、スイッチ関数を使用して出力を標準化できます。関数getDevicestate(){switch(window.getComputedStyle(indicator).getPropertyValue( 'z-index')、10)){case 2:return 'small-desktop';壊す;ケース3:「タブレット」を返します。壊す;ケース4:「電話」を返します。壊す;デフォルト:「デスクトップ」を返します。壊す; }}このようにして、次のコードを使用してデバイスのステータスを決定し、対応するJavaScriptコードを実行できます。
if(getDevicestate()== 'tablet'){//タブレットの下で実行されたJavaScriptコード}ここでjQueryを使用している場合は、次のコードを使用してください。
$(function(){$( 'body')。append( '<div> </div>'); function getdevicestate(){parseint($( '。state-indicator')。css( 'z-index')、10){case 2:case 2:return 'small-desktop'; break;} console.log(getDeviceState());最初に作成してから、取得し、最後にこのノードを削除します。特定のデバイスはコンソールに出力されます。デモを表示するには、ここをクリックしてください。中央の境界線をドラッグして[実行]をクリックしてみてください。