Gibt es eine Möglichkeit zum deaktivieren von media queries unter bestimmten Bedingungen?

Ich bin mit dem gleichen stylesheet für die Haupt-Website, sowie eine "Vorschau" der Seite (NICHT in einem iframe, weil ich es brauche interaktiv). Die Fragen, die Vorschau nicht bis 100% der Bildschirmbreite, so dass, wenn media queries basieren auf dem Bildschirm Größe, die Seite verhält sich seltsam. Ich bin ok mit dem editor/Vorschau-Modus mit fester Breite, obwohl, so dachte ich, vielleicht gibt es einige, so kann ich deaktivieren Sie die media-queries, die unter bestimmten Bedingungen? Ich habe keine Ahnung, wie zu nähern, dass, obwohl. Entweder per javascript, oder möglicherweise be eine zusätzliche, generische stylesheet nach der mediaqueries, dass würde irgendwie zurücksetzen Dinge.

Ansonsten kann ich noch machen, Alternative stylesheets, das wäre ein Schmerz zu erhalten, oder redesign der Seite, damit der Vorschaubereich wird 100% der Breite.

  • Einige HTML\CSS würde gehen einen langen Weg bei der Sie uns helfen Ihr problem zu lösen.
  • Bitte versuchen Sie, diese Lösung hier erwähnt, stackoverflow.com/a/20137580/567854
InformationsquelleAutor Damon | 2011-09-28
  1. 4

    Haben Sie eine Reihe von Optionen.

    • First off, können Sie deaktivieren die "beleidigende" stylesheet:
      mit <link id="mediaSheet" href="...."> können Sie diese in Ihrem onload-handler: document.getElementById("mediaSheet").sheet.disabled = true;.
    • Wenn Sie fühlen, wie Codierung, können Sie fügen Sie diesen link zu Ihrem endgültigen HTML bedingt. E. g. wenn die Seite angefordert wird, die mit einem GET-parameter ?preview=true, die stylesheet-element nicht erzeugt werden.
    • Das wäre der beste Weg, es zu tun. Nicht ganz elegant, aber wohl um die beste möglich für eine ziemlich abnormale situation.
    InformationsquelleAutor Alexander Pavlov
  2. 0

    Setzen der viewport-meta zu werden, eine gewisse Breite, das entspricht der Medien-Abfrage.

    Sicherzustellen, haben Sie die Skala richtig eingestellt aber. Ich Neige dazu, es zu entfernen, wenn Sie wollen ein Handy, um in der Lage zu sehen, die desktop-version.

    InformationsquelleAutor lededje
  3. 0

    Möchte nur hinzufügen zu A. Pavlov ' s Antwort (kann ich nicht hinzufügen, Kommentare) noch:

    Wenn Sie JQuery verwenden möchten

    $('#mediaSheet')[0].sheet.disabled = true

    Oder, wenn Sie wollen, deaktivieren Sie alle Medien-Anfragen, verwenden Sie class="mediaSheet" anstelle von ID:

    $('.mediaSheet').each(function(){
    $(this)[0].sheet.disabled = true;
});
    InformationsquelleAutor EdC
Schreibe einen Kommentar