21

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

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

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

ありがとう！

4

4 に答える 4

33

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

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

注：1440が推奨される画面幅です。

お役に立てれば ：）

于 2013-11-22T05:21:54.997 に答える
10

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

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

または同様のもの

于 2013-03-13T17:43:23.727 に答える
3

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

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
于 2016-07-07T14:49:14.617 に答える
0

無効にする必要のあるスタイルを独自のスタイルシートに配置するのが最も簡単で、タイトル属性を使用して簡単に見つけることができます。インラインスタイルにすることも、要素を.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;
  }  
}
于 2013-03-13T17:03:06.970 に答える