CSS Media Queries und JavaScript Fensterbreite nicht

Question

passen

Für eine ansprechende Vorlage habe ich eine Medienabfrage in meinem CSS:

@media screen and (max-width: 960px) { 
body{ 
/* something */ 
background:red; 
} 
} 

Und ich eine jQuery-Funktion auf Resize gemacht Breite zu protokollieren:

$(window).resize(function() { 
console.log($(window).width()); 
console.log($(document).width()); /* same result */ 
/* something for my js navigation */ 
} 

und es einen Unterschied mit CSS-Erkennung und JS Ergebnis, ich habe diese Meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

ich nehme an, es ist wegen der sc Überrollbügel (15 px). Wie kann ich das besser machen?

Answer 1

Sie haben die Bildlaufleiste korrekt, weil das CSS die Gerätebreite verwendet, aber JS die Dokumentbreite verwendet.

Sie müssen die Ansichtsfensterbreite in Ihrem JS-Code messen, anstatt die jQuery-Breitenfunktion zu verwenden.

Dieser Code ist von http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

Answer 2

Meine Erfahrung, dass die Abfrage Breite document.body.clientWidth Spuren Medien war. Aufgrund einer vertikalen Bildlaufleiste, die das Dokument, das Fenster oder das Viewport() .bright-Fenster öffnet und ausblendet, kann mein Javascript - abhängig von der Höhe des Fensters - nach Ablauf der Medienabfrage-Regel zu spät ausgeführt werden.

Durch die Überprüfung von document.body.clientWidth konnte mein Skriptcode zur gleichen Zeit ausgeführt werden, zu der die Medienabfrage-Regel wirksam wurde.

@media (min-width: 873px) {
        // einige Regeln
}
...

if (document.body.clientWidth> = 873) {
        // irgendein Code
}

Der Andy Langton Code hat mich darauf gebracht - danke!

Answer 3

fand ich folgenden Code auf http://www.w3schools.com/js/js_window.asp:

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

Praktisch sein die gleiche Art und Weise wie die Antwort in @ Michael Vogel Antwort zu arbeiten, aber es ist viel einfacher zu lesen.

Edit: Ich war auf der Suche nach einer Methode, um genau die gleiche Breite wie es für CSS-Medien Abfragen verwendet wird. Aber der vorgeschlagene funktioniert nicht perfekt auf Safari mit Bildlaufleisten, sorry. Am Ende habe ich moderniszr.js in einer zentralen Funktion verwendet und im Rest des Codes überprüfe ich nur, ob der Anzeigetyp Mobil, Tablet oder Desktop ist.Wie ich in der Breite nicht interessiert bin, das funktioniert gut für mich:

getDisplayType = function() { 
    if (Modernizr.mq('(min-width: 768px)')){ 
    return 'desktop'; 
    } 
    else if (Modernizr.mq('(min-width: 480px)')){ 
    return 'tablet' 
    } 
    return 'mobile'; 
}; 

Answer 4

Hallo ich diesen kleinen Trick JS und CSS arbeiten zusammen, leicht auf ansprechende Seiten zu bekommen:

Testen Sie die Sichtbarkeit eines Elements angezeigt oder nicht auf CSS @ media Größe Bedingung. Bootstrap Mit CSS i testen Sichtbarkeit einer versteckten-xs-Klasse Element

var msg = "a message for U"; 
 

 
/* At window load check initial size */ 
 
if ($('#test-xsmall').is(':hidden') ) { 
 
    /* This is a CSS Xsmall situation ! */ 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 

 
} else { 
 
    /* > 768px according to CSS */ 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
} 
 

 

 
/* And again when window resize */ 
 

 
$(window).on('resize', function() { 
 
    if ($('#test-xsmall').is(':hidden')) { 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 
    } else { 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
    } 
 
});

@media (min-width: 768px) { 
 
    .hidden-xs { 
 
    display: block !important; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .hidden-xs { 
 
    display: none !important; 
 
    } 
 
} 
 
.redthing-on-xsmall { 
 
    /* need a scrollbar to show window width diff between JS and css */ 
 
    min-height: 1500px; 
 
} 
 
.redthing { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- the CSS managed Element that is tested by JS --> 
 
<!-- class hidden-xs hides on xsmall screens (bootstrap) --> 
 

 
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on @media lower than 767px</span> 
 

 

 
<!-- the responsive element managed by Jquery --> 
 
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

Answer 5

Umgehung, das funktioniert immer und ist mit CSS Media Queries synchronisiert.

ein div auf Körper

<body> 
    ... 
    <div class='check-media'></div> 
    ... 
</body> 

Stil hinzufügen und sie Abfrage in bestimmten Medien

.check-media{ 
    display:none; 
    width:0; 
} 
@media screen and (max-width: 768px) { 
    .check-media{ 
     width:768px; 
    } 
    ... 
} 

dann in JS Check Stil, den Sie durch Eingabe in Medienabfrage

ändern durch Eingabe ändern

if($('.check-media').width() == 768){ 
    console.log('You are in (max-width: 768px)'); 
}else{ 
    console.log('You are out of (max-width: 768px)'); 
} 

Also im Allgemeinen können Sie jeden Stil, der geändert wird, indem Sie in spec Medienabfrage.

Answer 6

window.innerWidth ist was Sie brauchen.

if (window.innerWidth < 768) für 768 Bruchstelle in CSS arbeitet

Answer 7

Css Medienabfrage gleich window.innerWidth. Css Media Queries berechnet ebenfalls die Bildlaufleiste.