SCSS mixin to support vh and vw units on all iOS Safari versions. Based on an idea by Patrick Burtchaell's: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587

viewport-units-ios.scss

/**
 * Fix for vw, vh, vmin, vmax on iOS 7.
 * http://caniuse.com/#feat=viewport-units
 *
 * This fix works by replacing viewport units with px values on known screen sizes.
 *
 * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix.
 * Target devices running iOS 8+ will incidentally execute the media query,
 * but this will still produce the expected result; so this is not a problem.
 *
 * As an example, replace:
 *
 *   height: 50vh;
 *   font-size: 5vmin;
 *
 * with:
 *
 *   @include viewport-unit(height, 50vh);
 *   @include viewport-unit(font-size, 5vmin);
 */
@mixin viewport-unit($property, $value) {
  #{$property}: $value;

  $unit: unit($value);

  @if (index((vw, vh, vmin, vmax), $unit) != null) {
    $devices: (
      (768px, 1024px), // iPad (all versions)
      (320px, 480px),  // iPhone 4
      (320px, 568px)   // iPhone 5, 5C, 5S
    );

    @each $device in $devices {
      $device-width: nth($device, 1);
      $device-height: nth($device, 2);

      $device-query: "only screen and (-webkit-min-device-pixel-ratio: 1)";
      $device-query: "#{$device-query} and (device-width: #{$device-width})";
      $device-query: "#{$device-query} and (device-height: #{$device-height})";

      $percent: $value / ($value * 0 + 1); // see https://github.com/sass/sass/issues/533

      $percent-width: $device-width * $percent / 100;
      $percent-height: $device-height * $percent / 100;

      @if ($unit == vmin or $unit == vmax) {
        @media #{$device-query} {
          #{$property}: if($unit == vmin, $percent-width, $percent-height);
        }
      }
      @else {
        @media #{$device-query} and (orientation: portrait) {
          #{$property}: if($unit == vw, $percent-width, $percent-height);
        }

        @media #{$device-query} and (orientation: landscape) {
          #{$property}: if($unit == vw, $percent-height, $percent-width);
        }
      }
    }
  }
}

Neat! Now, what if I want to use it with calc (which I almost always do) ? Like @ include viewport-unit(max-height, calc(100vh - 113px)); That would make it perfect =)
Thanks anyways.

Neat! Now, what if I want to use it with calc (which I almost always do) ? Like @ include viewport-unit(max-height, calc(100vh - 113px)); That would make it perfect =)
Thanks anyways.

That one is tough. Then only way I can think of at the moment, is to add an optional third parameter to the mixin, like $delta: 0px. Then change lines starting with #{$property} to include a calc() of the current value + $delta. So instead of @include viewport-unit(max-height, calc(100vh - 113px));, you would do @include viewport-unit(max-height, 100vh, -113px);. That would be limited to the simplest calculations, though.

That one is tough. Then only way I can think of at the moment, is to add an optional third parameter to the mixin, like $delta: 0px. Then change lines starting with #{$property} to include a calc() of the current value + $delta. So instead of @include viewport-unit(max-height, calc(100vh - 113px));, you would do @include viewport-unit(max-height, 100vh, -113px);. That would be limited to the simplest calculations, though.

Is this mixin also available in LESS? (sorry my project is in LESS). I wasn't able to convert this with sass2less converters :(

Is this mixin also available in LESS? (sorry my project is in LESS). I wasn't able to convert this with sass2less converters :(

Exactly what I was looking for! Thanks!

Exactly what I was looking for! Thanks!

Clever. Clever indeed.

Clever. Clever indeed.

@AdmireNL I wrote a LESS mixin that does the same thing at https://gist.github.com/zaygraveyard/dc4ca2cb5271d6e8d641

@AdmireNL I wrote a LESS mixin that does the same thing at https://gist.github.com/zaygraveyard/dc4ca2cb5271d6e8d641

I just wanted to say THANK YOU!!!!!

I just wanted to say THANK YOU!!!!!

This is awesome, thank you!

This is awesome, thank you!

This is useless.
First you cannot detect if it's Safari or any other browser in CSS. So these rules will apply in any browser, but you don't need it in Chrome or Opera because viewport units are calculated correctly there.
Second this mixin doesn't take in consideration the sizes of browser elements, like toolbars. For example the screen height of iPad is 1024px, but in Safari the real height of viewport (portrait) is 905px, because the toolbar (address etc) takes 119px.

This is useless.
First you cannot detect if it's Safari or any other browser in CSS. So these rules will apply in any browser, but you don't need it in Chrome or Opera because viewport units are calculated correctly there.
Second this mixin doesn't take in consideration the sizes of browser elements, like toolbars. For example the screen height of iPad is 1024px, but in Safari the real height of viewport (portrait) is 905px, because the toolbar (address etc) takes 119px.

can you plz explain how i can change the mixing to get height with minus calculation like height: calc(100vh - 680px);

can you plz explain how i can change the mixing to get height with minus calculation like height: calc(100vh - 680px);

@inliner
css target hacks?

@inliner
css target hacks?