Skip to content

Instantly share code, notes, and snippets.

@jopfre
Last active May 30, 2018 10:34
Show Gist options
  • Save jopfre/b8ea1a7ebf39cd8efabb to your computer and use it in GitHub Desktop.
Save jopfre/b8ea1a7ebf39cd8efabb to your computer and use it in GitHub Desktop.
fix view height support in iOS7 - sass
//based on https://gist.github.com/pburtchaell/e702f441ba9b3f76f587
//with added support for iphone 3 and 4 and orinetation support for iphone 5.
//this is for all devices which can run iOS7 in all orientations.
//not a mixin to avoid to much duplicate code when using on multiple selectors.
.selector {
$height: 70; //set your height in vh
$heightPercent: $height/100;
height: #{$height}vh;
//iPhone 3 and 4 portrait
@media all and (device-width: 320px) and (device-height: 480px) and (orientation:portrait){
height: 480px*$heightPercent;
}
//iPhone 3 and 4 landscape
@media all and (device-width: 320px) and (device-height: 480px) and (orientation:landscape){
height: 320px*$heightPercent;
}
//iPhone 5 portrait
@media all and (device-width: 320px) and (device-height: 568px) and (orientation:portrait){
height: 568px*$heightPercent;
}
//iPhone 5 landscape
@media all and (device-width: 320px) and (device-height: 568px) and (orientation:landscape){
height: 320px*$heightPercent;
}
//iPad portrait
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
height: 1024px*$heightPercent;
}
//iPad landscape
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
height: 768px*$heightPercent;
}
}
@Frikki
Copy link

Frikki commented Sep 19, 2016

Here’s different slightly approach https://gist.github.com/BenMorel/e9e34c08360ebbbd0634

@zetareticoli
Copy link

But I need to subtract the toolbar height to get the REAL height...

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