it-swarm.com.de

Bootstrap 3 - Desktop-Ansicht auf einem mobilen Gerät

Ist es möglich, auf einem mobilen Gerät eine bootstrap Website als Desktop-Version anzuzeigen?

Grundsätzlich würde die Seite die 992px- oder 1200px-Ansichtsfenster anstelle der kleinen Geräte anzeigen.

Zum Beispiel können Sie mit BBC über einen Link unten auf der Seite zwischen der mobilen und der Desktop-Site wechseln. Dies möchte ich tun.

Danke, Liam

37
user3419961

Sie müssen nur das Ansichtsfenster einstellen

Erstelle einen Link wie du gesagt hast, und dieser Link ist ein Reload der Seite, aber mit einem ?desktop_viewport=true, dann können Sie eine Sitzung einrichten und schreiben, solange diese Sitzung eingerichtet ist

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

Stattdessen (Responsive Version)

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

In deinem <head>

Verwenden Sie dies als eine Schaltfläche

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

Und füge dies oben in deine PHP-Datei ein (diese muss auf jeder Seite geladen sein)

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

Danach müssen Sie das Ansichtsfenster entsprechend dem Sitzungswert ändern, indem Sie dies in <head>

<?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

Sie können die Bootstrap responsive Klassen mit jQuery umschalten. Zum Beispiel:

/* 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');
    }
});

Demo: http://www.bootply.com/12194

4
Zim

Ich habe responsive Grid-Selektoren verwendet und eine Desktop-Ansicht für meine Seite erstellt. Erstens muss das Ansichtsfenster geändert werden, wie oben angegeben

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

dies allein ändert jedoch nichts am Verhalten der Rasterselektoren. In der mobilen Ansicht ist die Seite breiter, aber das mobile Layout bleibt erhalten. Um dies zu ändern, nahm ich eine Kopie von bootstrap.css und benannte sie in bootstrap-non-responsive.css. In dieser Datei habe ich alle Bremspunkte verschiedener Ansichten auf eine Breite von 1 px geändert.

Dies kann durch Ändern aller Zeilen mit dem Schlüsselwort @Media erfolgen. Z.B.

@media (min-width: 768px) {

muss geändert werden zu

@media (min-width: 1px) {

Es ist möglich, mehrere Ersetzungen derselben Texte zu nutzen und die CSS-Datei einfach und schnell zu ändern, wenn Sie wissen, wie die Reaktionsfähigkeit von Bootstrap funktioniert. Es ist auch möglich, Code aus der CSS-Datei zu entfernen, dies ist jedoch nicht erforderlich, sondern lediglich eine Optimierung.

Zuletzt habe ich einen Link zum Wechseln der Desktop-Ansicht erstellt (verwendete Klasse "hidden-lg"), mit dem ein Cookie zum Speichern der Ansichtsauswahl erstellt wurde. Wenn es eine Auswahl von Desktop-Ansicht gab. Ich habe den normalen Code geändert:

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

zu

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

Wenn die Desktop-Ansicht ausgewählt wurde, wurde ein Link zur mobilen Ansicht angezeigt, mit dem das Cookie entfernt und zur reaktionsfähigen Ansicht gewechselt wurde.

1
mäksä

"Verwandeln Sie jedes Rasterlayout mit fester Breite in ein Layout mit voller Breite, indem Sie Ihren äußersten .container In .container-fluid. Ändern."

Die Dokumentation sagt, dass die Klasse .container-fluid. Hinzugefügt werden soll, damit sie flüssig wird. Wenn Sie sie entfernen, können Sie verhindern, dass sie flüssig wird.

sie könnten jQuery verwenden, um die Klassen zu ändern.

<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

Ja, benutze einfach nicht die Bootstrap responsive Grid Selektoren.

0
Lowkase