web-dev-qa-db-ja.com

@mediaクエリを無効にしたり、解決を強制したりできますか？理由：iphoneにデスクトップサイトの表示を許可しますか？

@mediaクエリを使用してサイトを大幅に変更し、携帯電話で非常にスリムに表示しています。しかし、ユーザーはデスクトップ版のサイト（リンクから入手可能）を求めています。

さらに一歩進むと、デスクトップサイト自体も解像度に応じて@mediaクエリによって変更されます。 「デスクトップ」の解像度を1つ選択し、1440x900とすると、携帯電話にその解像度での表示を強制することを考えていましたか？

これはおそらくJavaScriptを介して可能ですか？または、これらの@mediaクエリを完全に無効にできますか？

ありがとう！

javascripthtmlcssmedia-queries
19
Mark

クライアントにも同じ問題がありました。しかし問題は、120以上のCSSファイルにメディアクエリが含まれていたことでした。だから私がしたことは、ビューポートの幅を設定することです。私はそのサイトでこのスニペットを使用し、正常に動作しています。これを使用して、ユーザーがレスポンシブデザインと非レスポンシブデザインを切り替えるオプションを提供することもできます。

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

注：1440がお好みの画面幅です。

お役に立てれば ：）

29
Ijas Ameenudeen

<html>などの<body>またはclass="force-desktop"にクラスを追加し、メディアセレクターに追加します

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

または似たようなもの

9
romo

JQueryを使用しないIJasのソリューションは次のようになります。

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
2
Nils Langner

無効にする必要がある可能性のあるスタイルを独自のスタイルシートに配置するのが最も簡単で、タイトル属性を使用してスタイルを見つけやすくします。インラインスタイルにすることも、.cssファイルに要素をリンクすることもできます。

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}
0
kennebec