3300.me

safearea

last update: 2020/12/19
// viewport 

<meta name="viewport" content="width=*******, *******, *******, viewport-fit=cover">

// scss
ex) 16px

$space: 16px;
@each $side in right left bottom {
  padding-#{$side}: $space;
  padding-#{$side}: calc(constant(safe-area-inset-#{$side}) + #{$space}); // 11.1
  padding-#{$side}: calc(env(safe-area-inset-#{$side}) + #{$space}); // 11.2 ~
}

// css 
ex) 16px

padding-right: 16px;
padding-left: 16px;
padding-bottom: 16px;
padding-right: calc(constant(safe-area-inset-right) + 16px); // 11.1
padding-left: calc(constant(safe-area-inset-left) + 16px); // 11.1
padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); // 11.1
padding-right: calc(env(safe-area-inset-right) + 16px); // 11.2 ~
padding-left: calc(env(safe-area-inset-left) + 16px); // 11.2 ~
padding-bottom: calc(env(safe-area-inset-bottom) + 16px); // 11.2 ~

.