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（））;最初に作成してから、取得し、最後にこのノードを削除します。特定のデバイスはコンソールに出力されます。デモを表示するには、ここをクリックしてください。中央の境界線をドラッグして[実行]をクリックしてみてください。