4

レスポンシブ レイアウトを使用しているときに、モバイル デバイスで Web サイトのデスクトップ バージョンを表示するオプションをユーザーに提供する最も簡単な方法は何ですか?

4

4 に答える 4

8

メインのHTMLに応答するようなクラスを指定します。つまり、次のようなものを指定します。

<body class="responsive">
...
</body>

そして.responsive、通常の画面では親プレフィックスなしでCSSを記述します。

.myheading {
...
}
.mybutton {
...
}

.responsive小さい画面のメディアクエリで親プレフィックスを使用する

@media all and (max-width: 320px) { /* example */
    .responsive .myheading {
    ...
    }
    .responsive .mybutton {
    ...
    }
}

大画面バージョンを表示したい場合は、次のようにします。

$('body').removeClass('responsive');

メディアクエリはそれ以降無視されます。レスポンシブに戻したい場合は、次のようにします。

$('body').addClass('responsive');

注：上記のソリューションはjqueryを想定しており、jqueryがなくても同じように簡単に実行できます。

于 2012-07-10T12:38:09.777 に答える
2

これは私のために働く：

<head>～の間</head>

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<body>～の間<body>

<span id="desktopswitch">desktop version</span>

<script>～の間</script>

$('#desktopswitch').on('click', function() {
    $('#viewport').attr('content','width=1024, initial-scale=0, maximum-scale=5.0, user-scalable=1');
});

残念ながら、現在のサイトでのみ機能します。次のサイトでそのように表示するには、php でクエリを実行する必要があります。

于 2013-03-27T11:36:53.340 に答える
2

このようなものは機能しませんか？ 

 $('#TOGGLE').on('click', function() {
     $('meta[name="viewport"]').remove();
 });
于 2012-07-10T13:08:49.597 に答える
1

この質問に対する非常に良い解決策を見つけたと思います。CSS スタイルシート全体を親プレフィックスで 2 倍にすることなく、「フル」バージョンと「モバイル」バージョンを切り替えることができます。2000 ～ 3000 行以上の CSS がある場合、'techfoobar' による提案された回答はそれほど単純ではないと思います...

まず<meta name="viewport" content="width=device-width">、<head>タグに含める必要があります。

次に、ウェブサイトのフッターのどこかに 2 つのタグを配置します。

<span id="setvar">FULL version of website</span>
<span id="removevar">Back to mobile version</span>

次に主な機能を追加します。主なアイデアは、ローカル変数を localstorage に格納することです。Web サイトの他のページに移動した場合でも、モバイル デバイスで「フル バージョン」を維持できます。そのため、ユーザーが「フル バージョンのウェブサイト」をクリックすると、サイトのページを変更しても「フル バージョン」のままになります。

<script>
$( document ).ready(function() {

   //when we clicking on 'show full version' we are changing viewport and define local variable into the localstorage
   $("#setvar").click(function(){
      localStorage.setItem('localVar', 'exist');
      $('meta[name="viewport"]').prop('content', 'width=1024');

      //imitate toggling effect
      $(this).hide();
      $('#removevar').show();
  });

  // when we go to other pages there is checking 'if the local variable exist' - if exist then window automatically switched to full version
  if (localStorage.getItem('localVar') === 'exist') {
    $('meta[name="viewport"]').prop('content', 'width=1024');
    $('#setvar').hide();
    $('#removevar').show();
  }

  // when we click on 'Back to mobile version' we are removing local variable from localstorage and restore default viewport
   $("#removevar").click(function(){
      localStorage.removeItem('localVar', 'exist');
      $('meta[name="viewport"]').prop('content', 'width=device-width');
      $(this).hide();
      $('#setvar').show();
   }); 
});
</script>

最後に、デスクトップでこの機能を非表示にするスタイルを追加します

<style>
#removevar{
  display:none;
}
@media screen and (min-width: 1024px) {
  #setvar, #removevar{
  display:none;
  }
}
</style>
于 2016-07-26T08:38:29.537 に答える