Skip to content

Instantly share code, notes, and snippets.

@BenMorel

BenMorel/viewport-units-ios.scss

Last active January 25, 2025 17:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BenMorel/e9e34c08360ebbbd0634 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BenMorel/e9e34c08360ebbbd0634 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BenMorel revised this gist Sep 17, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,11 @@
    * 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.
    * but this will still produce the expected result; so this is not a problem.
    *
    * As an example, replace:
    *
  2. BenMorel revised this gist Sep 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    * http://caniuse.com/#feat=viewport-units
    *
    * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix.
    * Targeted devices running iOS 8+ will incidentally execute the media query,
    * Target devices running iOS 8+ will incidentally execute the media query,
    * but this will still produce the expected result.
    *
    * As an example, replace:
  3. BenMorel revised this gist Sep 17, 2015. 1 changed file with 11 additions and 9 deletions.
    20 changes: 11 additions & 9 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,21 @@

    /**
    * Support for vw and vh on buggy iOS Safari.
    * Fix for vw, vh, vmin, vmax on iOS 7.
    * http://caniuse.com/#feat=viewport-units
    *
    * For example, replace:
    * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix.
    * Targeted devices running iOS 8+ will incidentally execute the media query,
    * but this will still produce the expected result.
    *
    * As an example, replace:
    *
    * height: 50vh;
    * font-size: 5vh;
    * font-size: 5vmin;
    *
    * With:
    * with:
    *
    * @include viewport-unit(height, 50vh);
    * @include viewport-unit(font-size, 5vh);
    * @include viewport-unit(font-size, 5vmin);
    */
    @mixin viewport-unit($property, $value) {
    #{$property}: $value;
    @@ -21,10 +25,8 @@
    @if (index((vw, vh, vmin, vmax), $unit) != null) {
    $devices: (
    (768px, 1024px), // iPad (all versions)
    (320px, 480px), // iPhone 4 and before
    (320px, 568px), // iPhone 5, 5C, 5S
    (375px, 667px), // iPhone 6
    (414px, 736px), // iPhone 6 Plus
    (320px, 480px), // iPhone 4
    (320px, 568px) // iPhone 5, 5C, 5S
    );

    @each $device in $devices {
  4. BenMorel revised this gist Sep 17, 2015. 1 changed file with 38 additions and 31 deletions.
    69 changes: 38 additions & 31 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,39 +14,46 @@
    * @include viewport-unit(font-size, 5vh);
    */
    @mixin viewport-unit($property, $value) {
    @if (unit($value) != 'vw' and unit($value) != 'vh') {
    @error "Only vw and vh units are supported";
    }

    $devices: (
    (768px, 1024px), // iPad (all versions)
    (320px, 480px), // iPhone 4 and before
    (320px, 568px), // iPhone 5, 5C, 5S
    (375px, 667px), // iPhone 6
    (414px, 736px), // iPhone 6 Plus
    );

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

    #{$property}: $value;

    @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-width: $device-width * $percent / 100;
    $percent-height: $device-height * $percent / 100;

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

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

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

    @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);
    }
    }
    }
    }
    }
  5. BenMorel revised this gist Sep 17, 2015. No changes.
  6. BenMorel revised this gist Sep 17, 2015. No changes.
  7. BenMorel revised this gist Sep 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    * @include viewport-unit(font-size, 5vh);
    */
    @mixin viewport-unit($property, $value) {
    @if (unitless($value) or unit($value) != 'vw' and unit($value) != 'vh') {
    @if (unit($value) != 'vw' and unit($value) != 'vh') {
    @error "Only vw and vh units are supported";
    }

  8. BenMorel revised this gist Sep 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    * @include viewport-unit(font-size, 5vh);
    */
    @mixin viewport-unit($property, $value) {
    @if (unit($value) != 'vw' and unit($value) != 'vh') {
    @if (unitless($value) or unit($value) != 'vw' and unit($value) != 'vh') {
    @error "Only vw and vh units are supported";
    }

  9. BenMorel revised this gist Sep 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    * @include viewport-unit(font-size, 5vh);
    */
    @mixin viewport-unit($property, $value) {
    @if (unitless($value) or unit($value) != 'vw' and unit($value) != 'vh') {
    @if (unit($value) != 'vw' and unit($value) != 'vh') {
    @error "Only vw and vh units are supported";
    }

  10. BenMorel revised this gist Sep 17, 2015. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -31,22 +31,22 @@
    #{$property}: $value;

    @each $device in $devices {
    $deviceWidth: nth($device, 1);
    $deviceHeight: nth($device, 2);

    $percentWidth: $deviceWidth * $percent / 100;
    $percentHeight: $deviceHeight * $percent / 100;
    $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: #{$deviceWidth})";
    $device-query: "#{$device-query} and (device-height: #{$deviceHeight})";
    $device-query: "#{$device-query} and (device-width: #{$device-width})";
    $device-query: "#{$device-query} and (device-height: #{$device-height})";

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

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

    @media #{$device-query} and (orientation: landscape) {
    #{$property}: if(unit($value) == 'vw', $percentHeight, $percentWidth);
    #{$property}: if(unit($value) == 'vw', $percent-height, $percent-width);
    }
    }
    }
  11. BenMorel revised this gist Sep 17, 2015. 1 changed file with 6 additions and 10 deletions.
    16 changes: 6 additions & 10 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -37,19 +37,15 @@
    $percentWidth: $deviceWidth * $percent / 100;
    $percentHeight: $deviceHeight * $percent / 100;

    @media only screen
    and (device-width: $deviceWidth)
    and (device-height: $deviceHeight)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
    $device-query: "only screen and (-webkit-min-device-pixel-ratio: 1)";
    $device-query: "#{$device-query} and (device-width: #{$deviceWidth})";
    $device-query: "#{$device-query} and (device-height: #{$deviceHeight})";

    @media #{$device-query} and (orientation: portrait) {
    #{$property}: if(unit($value) == 'vw', $percentWidth, $percentHeight);
    }

    @media only screen
    and (device-width: $deviceWidth)
    and (device-height: $deviceHeight)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
    @media #{$device-query} and (orientation: landscape) {
    #{$property}: if(unit($value) == 'vw', $percentHeight, $percentWidth);
    }
    }
  12. BenMorel revised this gist Sep 17, 2015. No changes.
  13. BenMorel revised this gist Sep 17, 2015. 1 changed file with 18 additions and 4 deletions.
    22 changes: 18 additions & 4 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,15 @@
    * Support for vw and vh on buggy iOS Safari.
    * http://caniuse.com/#feat=viewport-units
    *
    * Example: replace "height: 50vh;" with "@include viewport-unit(height, 50vh);".
    * For example, replace:
    *
    * Note that this can also target non-iOS devices, but will still produce the expected result.
    * height: 50vh;
    * font-size: 5vh;
    *
    * With:
    *
    * @include viewport-unit(height, 50vh);
    * @include viewport-unit(font-size, 5vh);
    */
    @mixin viewport-unit($property, $value) {
    @if (unitless($value) or unit($value) != 'vw' and unit($value) != 'vh') {
    @@ -31,11 +37,19 @@
    $percentWidth: $deviceWidth * $percent / 100;
    $percentHeight: $deviceHeight * $percent / 100;

    @media only screen and (device-width: $deviceWidth) and (device-height: $deviceHeight) and (orientation: portrait) {
    @media only screen
    and (device-width: $deviceWidth)
    and (device-height: $deviceHeight)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
    #{$property}: if(unit($value) == 'vw', $percentWidth, $percentHeight);
    }

    @media only screen and (device-width: $deviceWidth) and (device-height: $deviceHeight) and (orientation: landscape) {
    @media only screen
    and (device-width: $deviceWidth)
    and (device-height: $deviceHeight)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
    #{$property}: if(unit($value) == 'vw', $percentHeight, $percentWidth);
    }
    }
  14. BenMorel revised this gist Sep 17, 2015. 1 changed file with 24 additions and 32 deletions.
    56 changes: 24 additions & 32 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,48 +3,40 @@
    * Support for vw and vh on buggy iOS Safari.
    * http://caniuse.com/#feat=viewport-units
    *
    * Example: replace "height: 50vh;" with "@include vh(50);".
    * Example: replace "height: 50vh;" with "@include viewport-unit(height, 50vh);".
    *
    * Note that this can also target non-iOS devices, but will still produce the expected result.
    */
    $devices: (
    (768px, 1024px), // iPad (all versions)
    (320px, 480px), // iPhone 4 and before
    (320px, 568px), // iPhone 5, 5C, 5S
    (375px, 667px), // iPhone 6
    (414px, 736px), // iPhone 6 Plus
    );

    @mixin vw($percent) {
    width: #{$percent}vw;

    @each $device in $devices {
    $width: nth($device, 1);
    $height: nth($device, 2);
    @mixin viewport-unit($property, $value) {
    @if (unitless($value) or unit($value) != 'vw' and unit($value) != 'vh') {
    @error "Only vw and vh units are supported";
    }

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: portrait) {
    width: ($width * $percent / 100);
    }
    $devices: (
    (768px, 1024px), // iPad (all versions)
    (320px, 480px), // iPhone 4 and before
    (320px, 568px), // iPhone 5, 5C, 5S
    (375px, 667px), // iPhone 6
    (414px, 736px), // iPhone 6 Plus
    );

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: landscape) {
    width: ($height * $percent / 100);
    }
    }
    }
    $percent: $value / ($value * 0 + 1); // see https://github.com/sass/sass/issues/533

    @mixin vh($percent) {
    height: #{$percent}vh;
    #{$property}: $value;

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

    $percentWidth: $deviceWidth * $percent / 100;
    $percentHeight: $deviceHeight * $percent / 100;

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: portrait) {
    height: ($height * $percent / 100);
    @media only screen and (device-width: $deviceWidth) and (device-height: $deviceHeight) and (orientation: portrait) {
    #{$property}: if(unit($value) == 'vw', $percentWidth, $percentHeight);
    }

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: landscape) {
    height: ($width * $percent / 100);
    @media only screen and (device-width: $deviceWidth) and (device-height: $deviceHeight) and (orientation: landscape) {
    #{$property}: if(unit($value) == 'vw', $percentHeight, $percentWidth);
    }
    }
    }
    }
  15. BenMorel revised this gist Sep 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    * Support for vw and vh on buggy iOS Safari.
    * http://caniuse.com/#feat=viewport-units
    *
    * Example: replace "width: 50vh;" with "@include vh(50);".
    * Example: replace "height: 50vh;" with "@include vh(50);".
    *
    * Note that this can also target non-iOS devices, but will still produce the expected result.
    */
  16. BenMorel revised this gist Sep 17, 2015. No changes.
  17. BenMorel revised this gist Sep 15, 2015. No changes.
  18. BenMorel revised this gist Sep 15, 2015. No changes.
  19. BenMorel created this gist Sep 15, 2015.
    50 changes: 50 additions & 0 deletions viewport-units-ios.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@

    /**
    * Support for vw and vh on buggy iOS Safari.
    * http://caniuse.com/#feat=viewport-units
    *
    * Example: replace "width: 50vh;" with "@include vh(50);".
    *
    * Note that this can also target non-iOS devices, but will still produce the expected result.
    */
    $devices: (
    (768px, 1024px), // iPad (all versions)
    (320px, 480px), // iPhone 4 and before
    (320px, 568px), // iPhone 5, 5C, 5S
    (375px, 667px), // iPhone 6
    (414px, 736px), // iPhone 6 Plus
    );

    @mixin vw($percent) {
    width: #{$percent}vw;

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

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: portrait) {
    width: ($width * $percent / 100);
    }

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: landscape) {
    width: ($height * $percent / 100);
    }
    }
    }

    @mixin vh($percent) {
    height: #{$percent}vh;

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

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: portrait) {
    height: ($height * $percent / 100);
    }

    @media only screen and (device-width: $width) and (device-height: $height) and (orientation: landscape) {
    height: ($width * $percent / 100);
    }
    }
    }