CODEWITHSUNDEEP
cssmedia-queriesinternet-explorer-11
Rycochet
Rycochet

Reputation: 2938

IE11 unable to recognise viewport units in @media queries

Doing scaling code in css (as it doesn't rely on javascript being there), so the width / height ratio remains the same at all sizes. For all the currently supported browsers it works, but IE11 seems to totally ignore the media queries - has anyone come across a way to get it to work?

Using scss for ease of coding -

$width: 512;
$height: 350;

@mixin aspect-ratio() {
    $widthRatio: $width / $height;
    $heightRatio: $height / $width;

    $widthHeight: #{$widthRatio * 100}vh;
    $heightWidth: #{$heightRatio * 100}vw;

    /* Fix the width relative to the height */
    @media all and (min-width: $widthHeight) {
        max-width: $widthHeight;
    }

    /* Fix the height relative to the width */
    @media all and (min-height: $heightWidth) {
        max-height: $heightWidth;
    }
}

body {
    @include aspect-ratio();
}

Which outputs -

@media all and (min-width: 146.28571vh) {
    body {
        max-width: 146.28571vh;
    }
}
@media all and (min-height: 68.35938vw) {
    body {
        max-height: 68.35938vw;
    }
}

edit: As pointed out in a comment below I didn't need the media queries for this, however I still have two other things that do seem to need it - font scaling needs to be height based unless this puts blank space below the body when it needs to become width based, and there are "fake" footers which get position:fixed and a top added to them to keep them in the right place...

@mixin footer-aspect-ratio() {
    $footerHeightRatio: $height / $width;

    $footerHeightWidth: #{$footerHeightRatio * 100}vw;

    $footerHeightPx: #{$height}px;

    top: calc(100vh - 3rem);

    $footerTopMin: calc(#{$footerHeightWidth} - 3rem);

    /* Fix the height relative to the width */
    @media all and (min-height: $footerHeightWidth) {
        top: $footerTopMin;
    }

    /* Make sure the font can never get too short */
    @media all and (max-height: #{$height}px), all and (max-width: #{$width}px) {
        bottom: 0;
    }
}

and

@mixin font-scaling($font-vh: 4.5) {
    $widthRatio: $width / $height;
    $heightRatio: $height / $width;

    $widthHeight: #{$widthRatio * 100}vh;
    $heightWidth: #{$heightRatio * 100}vw;

    $fontsizeWidthHeight: #{$font-vh}vh;
    $fontsizeHeightWidth: calc(#{$heightRatio} * #{$font-vh}vw);
    $fontsizeMin: #{$font-vh * $height / 100}px;

    /* Fix the width relative to the height */
    font-size: $fontsizeWidthHeight;

    /* Fix the height relative to the width */
    @media all and (min-height: $heightWidth) {
        font-size: $fontsizeHeightWidth;
    }

    /* Make sure the font can never get too short */
    @media all and (max-height: #{$height}px), all and (max-width: #{$width}px) {
        font-size: $fontsizeMin;
    }
}

Upvotes: 2

Views: 2205

Answers (1)

Mr Lister
Mr Lister

Reputation: 46599

One solution is to not use min-width and min-height, but min-aspect-ratio and max-aspect ratio. See MDN.

html {background:white; height:100%}
body {background:yellow; height:calc(100% - 16px)}

@media all and (min-aspect-ratio: 512/350) {
    body {
        max-width: 146.28571vh;
    }
}
@media all and (max-aspect-ratio: 512/350) {
    body {
        max-height: 68.35938vw;
    }
}
  This is a test. Again.

Which works in IE9 and up.

I'm not sure how the mixins in your question are supposed to work, but I hope this example will get you started.

Upvotes: 6

Related Questions