Menu icon Foundation
JavaScript Utilities - MediaQuery Issue

Hi Community,

I'm having a little trouble with one of the F6 JavaScript Utilities retuning an unexpected value. When I try testing the utility in the console using jquery like so:

$(function() {
    console.log(Foundation.MediaQuery.get('medium'));
});

the console returns the following string:

only screen and (min-width: 47.9375em)

BUT - I was expecting to see the minimum pixel value for the `medium` breakpoint - as per the documentation something like 640px.

Is there another utility that does this - or am I doing something wrong?

Thanks in advance for your help!

javascriptutilitiesmedia queriesdocumentation

Hi Community,

I'm having a little trouble with one of the F6 JavaScript Utilities retuning an unexpected value. When I try testing the utility in the console using jquery like so:

$(function() {
    console.log(Foundation.MediaQuery.get('medium'));
});

the console returns the following string:

only screen and (min-width: 47.9375em)

BUT - I was expecting to see the minimum pixel value for the `medium` breakpoint - as per the documentation something like 640px.

Is there another utility that does this - or am I doing something wrong?

Thanks in advance for your help!

Alan Durkan over 2 years ago

Ok - I've figured that the docs are little contradictory.

On the Media Queries page the behaviour i'm seeing is accurately described. However on the utilities page the description of the returned value for this function is different - and is actually the functionality that I need.

If anyone does have an idea of how to retrieve the minimum pixel value of a named breakpoint that would be great.

Thanks

 

Alan Durkan over 2 years ago

 In the end I wrote the following function to suit my purpose:

function getBreakpointPx(e) {
    var o = parseFloat($('body').css('font-size')), t = parseFloat(e.match(/[\d\.]+/));
    return o * t
}
var p = getBreakpointPx(Foundation.MediaQuery.get('medium'))); // <-- returns 640

Only an intermediate solution until something more reliable can be found.

Hope it helps somebody