Dobry wieczór wszystkim

[HTML] pobierz, plaintext 
<script type="text/javascript">
        $(document).ready(function () {
 
            if (screen.width <= 1200) {
                $(".content .page-width ul.video").hide();
                $(".content .page-width ul.second").css("width: 500px;");
            }
            else {
 
                $(".content ul.video").show();
            }
 
        });
</script>
[HTML] pobierz, plaintext 

Kod ten prawidłowo działa - jeżeli rozdzielczość jest równa/mniejsza od 1200px, to odpowiedni div się kryje - wszystko działa prawidłowo.
Kiedy wejdziecie jednak na facebooka, albo twitch.tv, to zauważycie, że tam również elementy kryją sięprzy zbyt niskiej rozdzielczości (np. boczne menu).

Jaka jest różnica? Obraz w przeglądarce możemy powiększać znakiem +, lub ctrl+ i kiedy to robię, to element się nie chowa (chociaż powiększam obraz sztucznie nawet do bardzo niskiej rozdzielczości). Przy sztucznym powiększaniu obrazu w przeglądarce, javascript nie działa. Wszystko wyświetla się prawidłowo dopiero po zmianie rozdzielczości w ustawieniach wyświetlacza i odświeżeniu strony internetowej. Na facebook'u i twichu elementy ulegają zmianie zarówno po zmianie rozdzielczości, jak i sztucznym powiększaniu. Jak to zrobić? Być może jest opcja zmiany efektu "schowaj div po zmianie rozdzielczości monitora" na "schowaj div po zmianie rozdzielczości obrazu w przeglądarce". Mam nadzieję, że dobrze wszystko wyjaśniłem.

Sprawdź

[JAVASCRIPT] pobierz, plaintext 
$(window).on('resize', function(){
var width = $(window).width();
//akcja
})
[JAVASCRIPT] pobierz, plaintext 

Zamiast robić to w javascript skorzystaj z "media queries" w CSS3.