web-dev-qa-db-fra.com

Styleswitcher or themeswitcher for mobile user

J'ai créé une version mobile de mon site avec CSS, avec tous mes styles dans une seule feuille de style (en utilisant @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) pour définir les styles mobiles). Lorsque tout est dans une seule feuille de style, cela fonctionne bien.

Mais je veux permettre aux utilisateurs de revenir à l'affichage standard même s'ils consultent le site à partir d'un appareil mobile. Je ne connais aucun moyen d'autoriser l'utilisateur à remplacer le @media. Il me semble donc que j'ai deux options: (1) feuilles de style séparées plus script de changement de styles, ou (2) thèmes séparés plus thèmeswitcher.

Théoriquement, cela devrait être possible avec un sélecteur de styles, mais je ne vois pas comment le faire pour remplacer la déclaration de média dans l'en-tête. Ainsi, même lorsque je clique sur "Basculer en mode d'affichage standard", il charge toujours la feuille de style mobile.

Alors j'ai commencé à chercher dans les themeswitchers. Je souhaite détecter les utilisateurs mobiles et les diriger vers le thème mobile par défaut, tout en leur permettant de revenir s'ils le souhaitent.

C’est essentiellement ce que le plug-in WP Mobile Pack fait, mais il comporte de nombreuses fonctionnalités supplémentaires dont je n’ai pas besoin, et j’ai lu des histoires horribles sur la façon dont il modifie la base de données. Je n'ai pas non plus besoin de tous les thèmes mobiles prédéfinis, car j'ai déjà écrit le CSS dont j'ai besoin pour la version mobile.

Quelqu'un peut-il recommander une solution plus légère, comme un simple script themeswitcher associé à un plugin de détection mobile qui ne nécessite pas que je définisse des requêtes multimédia dans l'en-tête?

2
Sarah

Ne serait-il pas suffisant de changer de mobile/de bureau via une variable $ _SESSION, de faire en sorte que le "lien vers le bureau" inclue quelque chose comme ?switchtodesktop=1 et que l'en-tête contienne quelque chose comme:

session_start();
if ($_GET['switchtodesktop']) {
  $_SESSION['switchtodesktop'] = true;
}
$desktop = isset($_SESSION['switchtodesktop']);
[...]
if ($desktop) {
  // only desktop css without media queries
} else {
  // default stuff (media queries, like you have now ..)
}
1
Kelley van Evert

Vous pouvez utiliser le global $is_iphone pour déterminer si vous êtes sur un appareil mobile ou non. Ne vous souciez pas du nom. Il attrape également d'autres appareils.

0
kaiser