web-dev-qa-db-ja.com

Bootstrap 3-モバイルデバイスのデスクトップビュー

モバイルデバイスの場合、デスクトップバージョンとしてbootstrap Webサイトを表示できますか？

基本的に、ページには小さなデバイスのビューポートではなく、992pxまたは1200pxのビューポートが表示されます。

たとえば、 [〜＃〜] bbc [〜＃〜] を使用すると、ページの下部にあるリンクを使用してモバイルサイトとデスクトップサイトを切り替えることができます。

ありがとう、リアム

csstwitter-bootstrapmobiletwitter-bootstrap-3
37
user3419961

ビューポートを設定するだけです

あなたが言ったようにリンクを作成し、このリンクはページのリロードですが、?desktop_viewport=trueを使用して、セッションを設定することができ、そのセッションが設定されている限り、これを書きます

<meta name="viewport" content="width=1024">

代わりに（レスポンシブバージョン）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

あなたの<head>

これをボタンとして使用する

<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>

そして、これをphpファイルの先頭に挿入します（すべてのページに魔女をロードする必要があります）

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

その後、<head>でこれを行うことにより、Sessionvalueに応じてビューポートを変更する必要があります

<?php
if($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?>
55
Pinki

JQueryを使用して、Bootstrapレスポンシブクラスを切り替えることができます。たとえば、

/* toggle layout */
$('#btnToggle').click(function(){
    if ($(this).hasClass('on')) {
        $('#main .col-md-4').addClass('col-xs-4').removeClass('col-md-4');
        $(this).removeClass('on');
    } else {
        $('#main .col-xs-4').removeClass('col-xs-4').addClass('col-md-4');
        $(this).addClass('on');
    }
});

デモ： http://www.bootply.com/12194

4
Zim

レスポンシブグリッドセレクターを使用し、ページにデスクトップビューを作成しました。まず、前述のようにビューポートを変更する必要があります

<meta name="viewport" content="width=1024">

ただし、これだけではグリッドセレクターの動作は変わりません。ページはモバイルビューでは幅が広くなりますが、モバイルレイアウトのままです。これを変更するために、bootstrap.cssからコピーを取り、bootstrap-non-responsive.cssという名前を付けました。このファイルでは、さまざまなビューのすべてのブレーキポイントを1ピクセルの幅に変更しました。

これは、キーワード@Mediaを使用してすべての行を変更することで実行できます。例えば。

@media (min-width: 768px) {

に変更する必要があります

@media (min-width: 1px) {

同じテキストの複数の置換を利用することができ、Bootstrapの応答性がどのように機能するかを理解していれば、CSSファイルを簡単かつ迅速に変更できます。 cssファイルから一部のコードを削除することもできますが、必ずしも最適化する必要はありません。

最後に、デスクトップビューを切り替えるためのリンク（クラス「hidden-lg」を使用）を作成し、ビューの選択を保存するCookieを作成しました。デスクトップビューの選択があった場合。私は通常のコードを変更しました：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css">

に

<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap-non-responsive.css" />

デスクトップビューが選択されていた場合、Cookieを削除してレスポンシブビューに切り替えるモバイルビューへのリンクを示しました。

1
mäksä

「最も外側の.containerを.container-fluid.に変更して、固定幅のグリッドレイアウトを全幅レイアウトに変更します。」

ドキュメントでは、.container-fluid.クラスを追加して流動性にすることで、削除することで流動性を停止できると述べています。

jQueryを使用してクラスを変更できます。

<a id="js-switch">switch to desktop</a>

    <script>
       $("#js-switch").on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            $("#container-id").removeClass('container-fluid');
            $("#container-id").addClass('container');
       });
    </script>
1
Will

はい、Bootstrapレスポンシブグリッドセレクターを使用しないでください。

0
Lowkase