Skip to content

Instantly share code, notes, and snippets.

@dohoons

dohoons/getSafeArea.js

Last active April 20, 2020 03:33
Show Gist options
  • Save dohoons/236e095266201760dc84450982959a48 to your computer and use it in GitHub Desktop.
Save dohoons/236e095266201760dc84450982959a48 to your computer and use it in GitHub Desktop.
Download ZIP
getSafeArea()
Raw
getSafeArea.js
function getSafeArea() {
var result, computed, div = document.createElement('div');
div.style.padding = 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)';
document.body.appendChild(div);
computed = getComputedStyle(div);
result = {
top: parseInt(computed.paddingTop) || 0,
right: parseInt(computed.paddingRight) || 0,
bottom: parseInt(computed.paddingBottom) || 0,
left: parseInt(computed.paddingLeft) || 0
};
document.body.removeChild(div);
return result;
}
getSafeArea(); // return { top: 0, right: 44, bottom: 21, left: 44 }
@CreatiCoding
Copy link

https://gist.github.com/CreatiCoding/0c32f14101d4ccd565ff782cb996aefc
안녕하세요 올려주신 코드를 기반으로 bottom safe-area를 가지고 있는지 파악할 수 있는
hasSafeArea를 만들었습니다. 문제있을시 자삭 하겠습니다. 감사합니다.

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