Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active February 6, 2018 21:21
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jonathantneal/db4f77009b155f083738 to your computer and use it in GitHub Desktop.
Save jonathantneal/db4f77009b155f083738 to your computer and use it in GitHub Desktop.
Media Queries for everybody
(function () {
var
documentElement = document.documentElement,
viewportFontSize, viewportHeight, viewportIsPortrait, viewportMax, viewportMin, viewportWidth;
function getViewportFontSize() {
var
body = documentElement.appendChild(document.createElement('body')),
iframe = document.createElement('iframe'),
iframeDocument;
iframe.style.cssText = 'clip:rect(0 0 0 0);position:absolute';
body.appendChild(iframe);
iframeDocument = iframe.contentWindow.document;
iframeDocument.write('<div style=height:1em;overflow:hidden>');
iframeDocument.close();
viewportFontSize = iframeDocument.body.lastChild.clientHeight;
documentElement.removeChild(body);
}
function getViewportSize() {
viewportHeight = Math.max(documentElement.clientHeight, documentElement.offsetHeight);
viewportWidth = Math.max(documentElement.clientWidth, documentElement.offsetWidth);
viewportMax = Math.max(viewportHeight, viewportWidth);
viewportMin = Math.min(viewportHeight, viewportWidth);
viewportIsPortrait = viewportHeight > viewportWidth;
}
function replace() {
var args = arguments, index = 0, string = args[0];
while (++index in args) {
string = string.replace(args[index], args[++index]);
}
return string;
}
function computeCSSValue(length, unit) {
return length * replace(unit,
/cm/, 37.7952,
/r?em/, viewportFontSize,
/in/, 96,
/mm/, 3.77952,
/pc/, 16,
/pt/, 4 / 3,
/px/, 1,
/vh/, viewportHeight,
/vmax/, viewportMax,
/vmin/, viewportMin,
/vw/, viewportWidth
);
}
function evaluateMediaQuery(query) {
return new Function('e', 'try{return ' + replace(String(query || 1).toLowerCase(),
// ignore `only`
/^only\s+/g, '',
// wrap `not`
/not([^)]+)/g, '!($1)',
// interpret `all`, `portrait`, and `screen` as truthy
/all|portrait|screen/g, 1,
// interpret `landscape`, `print` and `speech` as falsey
/landscape|print|speech/g, 0,
// interpret `and`
/\band\b/g, '&&',
// interpret `,`
/,/g, '||',
// interpret `min-` as >=
/min-([a-z-\s]+):/g, 'e.$1>=',
// interpret `min-` as <=
/max-([a-z-\s]+):/g, 'e.$1<=',
// interpret others as ==
/([a-z-\s]+):/g, 'e.$1==',
// interpret css values
/(\d+)([a-z]+)/g, function (match, length, unit) {
return computeCSSValue(length, unit);
}
) + '}catch(e){}')({
height: viewportHeight,
orientation: viewportIsPortrait,
width: viewportWidth
});
}
})();
@albell
Copy link

albell commented Jan 30, 2015

Nice. Typo: on line 83 in the comment it should be 'max'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment