web-dev-qa-db-fra.com

Bootstrap 3 - vue du bureau sur un appareil mobile

Est-il possible d'afficher un site Web bootstrap comme version de bureau, sur un appareil mobile?

Fondamentalement, la page afficherait les fenêtres 992px ou 1200px au lieu de celle des petits appareils.

Par exemple, le BBC vous permet de basculer entre le site mobile et le site de bureau en utilisant un lien en bas de la page, ce que j'aimerais faire.

Merci, Liam

csstwitter-bootstrapmobiletwitter-bootstrap-3
37
user3419961

Il vous suffit de définir la fenêtre d'affichage

Faites un lien comme vous l'avez dit, et ce lien est un rechargement de la page mais avec un ?desktop_viewport=true, alors vous pouvez définir une session et tant que cette session est définie, vous écrivez ceci

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

Au lieu de cela (version responsive)

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

Dans votre <head>

Utilisez-le comme un bouton

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

Et insérez-le en haut de votre fichier php (la sorcière doit être chargée sur chaque page)

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

Après cela, vous devez modifier la fenêtre d'affichage en fonction de la valeur de session en procédant ainsi dans <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

Vous pouvez basculer les classes réactives Bootstrap en utilisant jQuery .. Par exemple,

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

Démo: http://www.bootply.com/12194

4
Zim

J'ai utilisé des sélecteurs de grille réactifs et créé une vue de bureau sur ma page. Tout d'abord, la fenêtre doit être modifiée comme indiqué précédemment pour

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

mais cela seul ne change pas le comportement des sélecteurs de grille. La page est plus large en vue mobile, mais sa présentation reste mobile. Pour changer cela, j'ai pris une copie de bootstrap.css et je l'ai nommée bootstrap-non-responsive.css. Dans ce fichier, j'ai changé tous les points de freinage des différentes vues en largeur de 1 px.

Cela peut être fait en changeant toutes les lignes avec le mot-clé @Media. Par exemple.

@media (min-width: 768px) {

doit être changé en

@media (min-width: 1px) {

Il est possible de profiter de plusieurs remplacements de mêmes textes et il est facile et rapide de modifier le fichier css si vous comprenez comment fonctionne la réactivité de Bootstrap. Il est également possible de supprimer du code du fichier css, mais ce n'est pas nécessaire, juste une optimisation.

Enfin, j'ai créé un lien pour changer la vue du bureau (utilisé la classe "hidden-lg"), qui a créé un cookie pour enregistrer la sélection de la vue. S'il y avait une sélection de vue du bureau. J'ai changé le code normal:

<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" />

Si la vue sur le bureau avait été sélectionnée, j'ai montré un lien vers la vue mobile qui supprimerait le cookie et passerait en vue réactive.

1
mäksä

"Transformez n'importe quelle disposition de grille à largeur fixe en une disposition à pleine largeur en modifiant votre _ .container à .container-fluid. "

Les docs disent d'ajouter le .container-fluid. classe pour le rendre fluide donc en le retirant vous pouvez l'empêcher d'être fluide.

vous pouvez utiliser jQuery pour changer les classes.

<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

Oui, n'utilisez simplement pas les sélecteurs de grille réactifs Bootstrap.

0
Lowkase