web-dev-qa-db-fra.com

Possible de désactiver les requêtes @media ou de forcer une résolution? Raison: permettre à un iphone de voir le site de bureau?

J'ai mon site profondément modifié via des requêtes @media pour afficher très slimdown sur les téléphones mobiles. Cependant, mes utilisateurs demandent la version de bureau du site (disponible via un lien).

Pour aller plus loin, le site de bureau lui-même est également modifié par les requêtes @media en fonction de la résolution. Je pensais choisir une résolution "de bureau", par exemple 1440x900 et forcer le téléphone mobile à afficher à cette résolution?

Est-ce possible, peut-être par le biais de JavaScript? Sinon, ces requêtes @media peuvent-elles être totalement désactivées?

Merci!

javascripthtmlcsscss3media-queries
19
Mark

J'ai eu le même problème avec un client. Mais le problème était qu'il y avait plus de 120 fichiers CSS contenant les requêtes des médias. J'ai donc défini la largeur de la fenêtre. J'ai utilisé cet extrait sur ce site et j'ai bien fonctionné. En utilisant cela, même vous pouvez donner aux utilisateurs la possibilité de basculer entre un design réactif et un design non réactif.

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

Remarque : 1440 correspond à votre largeur d'écran préférée.

J'espère que cela t'aides :)

28
Ijas Ameenudeen

J'ajouterais une classe à votre <html> ou à <body> telle que class="force-desktop", puis sur votre sélecteur de média, ajoutez

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

ou quelque chose de similaire

9
romo

La solution de IJas sans JQuery ressemble à ceci:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
2
Nils Langner

Il est plus facile de mettre tous les styles qui doivent éventuellement être désactivés dans leurs propres feuilles de style, avec des attributs de titre facilitant leur recherche. Ils peuvent être des éléments de style en ligne ou des liens vers des fichiers .css.

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}
0
kennebec