lundi 1 août 2016

Javascript Screen Width/Media Query If Statement That Returns an Alert Box if True

I am very new to Javascript and web development as a whole and I'm quite stuck with an If Statement here. The objective of this code is to read if the screen width (or media query) is below 450px, and if so display an alert box - I'm only needing this to work on one page at the moment.

The HTML:

either

<body onload="fullQuote()">

-or- (I'm not sure if the second actually works)

<script>window.onload = fullQuote()</script>

The JavaScript:

function fullQuote() {
var mediaQuery = window.matchMedia("(max-width: 450px)");
if (mediaQuery.matches) {
    alert("Test");
    }
}

I can't seem to find an answer as to whats wrong with this code anywhere, but I have tried different methods of finding out the screen size like

if (screen.width <= 450) {
if (document.documentElement.clientWidth < 450) {

and also a boolean within the if parentheses:

if (mediaQuery.matches == true) {

among some other ways around this now lost to memory which, of course, shared the same failed results.

Any help to where I am going wrong this matter would be greatly appreciated,

Thanks,

Will

Aucun commentaire:

Enregistrer un commentaire