fix view height support in iOS7 - sass

gistfile1.txt

//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;
  }
}

This is a great contribution, very useful. Thanks!

Thanks - a nice update of https://gist.github.com/pburtchaell/e702f441ba9b3f76f587

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

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