wake-up-neo.net

Möglich, @media-Abfragen zu deaktivieren oder eine Auflösung zu erzwingen? Grund: Kann ein iPhone die Desktop-Site sehen?

Ich habe meine Site über @media-Abfragen so SCHWER modifiziert, dass sie auf Mobiltelefonen sehr schlank angezeigt wird. Meine Benutzer fragen jedoch nach der Desktop-Version der Website (verfügbar über einen Link).

Um noch einen Schritt weiter zu gehen, wird die Desktop-Site selbst abhängig von der Auflösung auch durch @media-Abfragen geändert. Ich habe darüber nachgedacht, eine "Desktop" -Auflösung auszuwählen, z. B. 1440 x 900, und das Mobiltelefon zu einer Anzeige mit dieser Auflösung zu zwingen.

Ist das möglich, vielleicht durch JavaScript? Alternativ können diese @media Abfragen ganz deaktiviert werden?

Vielen Dank!

19
Mark

Ich hatte das gleiche Problem mit einem Kunden. Das Problem war jedoch, dass 120+ CSS-Dateien die Medienanfragen enthielten. Also habe ich die Breite des Darstellungsbereichs eingestellt. Ich habe diesen Ausschnitt auf dieser Site verwendet und funktioniert einwandfrei. Auf diese Weise können Sie den Benutzern sogar die Möglichkeit geben, zwischen responsivem Design und nicht responsivem Design umzuschalten.

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

Hinweis : 1440 ist Ihre bevorzugte Bildschirmbreite.

Hoffe das hilft :)

28
Ijas Ameenudeen

Ich würde eine Klasse zu Ihrem <html> oder <body> hinzufügen, wie class="force-desktop" und dann zu Ihrem Medienselektor hinzufügen

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

oder etwas ähnliches

9
romo

Die Lösung von IJas ohne JQuery sieht folgendermaßen aus:

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

Es ist am einfachsten, alle Stile, die möglicherweise deaktiviert werden müssen, in ihre eigenen Stylesheets einzufügen, mit Titelattributen, um sie leichter finden zu können. Sie können Inline-Stil sein oder Elemente mit CSS-Dateien verknüpfen.

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