Skip to content

Instantly share code, notes, and snippets.

@Tusko
Forked from jopfre/gist:b8ea1a7ebf39cd8efabb
Last active June 23, 2016 13:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tusko/9b4041e4666735d583718b3628b4b88b to your computer and use it in GitHub Desktop.
Save Tusko/9b4041e4666735d583718b3628b4b88b to your computer and use it in GitHub Desktop.
fix view height support in iOS7
//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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment