iPhone X (iOS11)의 Apple-mobile-web-app-status-bar-style

소개



디지털 퀘스트 Advent Calendar 21일째는, 디자이너 umi가 담당하겠습니다.

최근 AMP에서 좋은 느낌의 외형 사이트를 만들어 보거나 PWA + AMP를 시도해 보는 것이 내 붐이므로 그것에 대해 ...... , iOS11의 iPhone X에서 apple-mobile-web-app-status-bar-style에 대해 쓰고 싶습니다.

apple-mobile-web-app- Honyara 란 무엇입니까?



apple-mobile-web-app(정식명칭이라고 하는 것입니까)라고 하는 것은 <head> ~ </head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="タイトル">

등이라고 써 두고, 그 웹 페이지를 iOS의 Safari에서 「홈 화면에 추가」하고, 홈 화면에 놓인 아이콘을 탭하면, Safari의 앱이 아닌 풀 스크린으로 단독의 앱풍에 시작해 준다.

이 웹 앱 모드로 하는 meta 태그는 이전부터 있었는데, iOS가 업데이트됨에 따라 표시가 이상해지거나, 효과가 없어지거나…… 했었나요? 개인적으로는 사용할 기회가 없어 완전히 잊고 있었습니다.

iPhone X의 노치 부분의 표시는 어떻게 되는가?



apple-mobile-web-app-status-bar-style의 상태 표시 줄 차이


apple-mobile-web-app-status-bar-style 에서 content 로 지정할 수 있는 것은 default black black-translucent 로 각각 상태 표시줄 부분의 배경색이 바뀝니다.

우선은 수중에 있는 iPhone 6s(iOS 11)의 표시를 게재합니다.
※오른쪽은 페이지를 조금 스크롤한 상태의 스크린 샷입니다.

iPhone 6s에서 default


<meta name="apple-mobile-web-app-status-bar-style" content="default">



아이폰 6s에서 블랙


<meta name="apple-mobile-web-app-status-bar-style" content="black">



iPhone 6s에서 black-translucent


<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">



지금 깨달았습니다만, 충전 상태로 스크린 샷 찍어 버렸습니다. 초록이 눈에 띕니다…

글쎄, iPhone X의 경우 ...



iPhone X에서 default


<meta name="apple-mobile-web-app-status-bar-style" content="default">



iPhone X에서 블랙


<meta name="apple-mobile-web-app-status-bar-style" content="black">



오, 상태 표시 줄의 시계와 아이콘이 흰색이 아닙니다.
이것이 옳은지, 아니면 향후 업데이트로 고칠 것인가.

iPhone X에서 black-translucent


<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">



뭐 상상대로라고 생각합니다.

sticky header와 black-translucent



다만, 스티키 헤더등의 경우는 주의가 필요합니다.
심지어 화면 스크롤하면


흠, 미묘…
하지만 그 노치 때


이것은 ~~~~~~~~~ 없을까~~~~~~~~~이 되네요.
※개인의 감상입니다.

만약 헤더 고정으로 apple-mobile-web-app-capableyes 로 하는 안건이 있고, 오목을 어떻게 할까, 어떻게든 할 수 있을까 아니면 할 수 없는지 생각할 정도라면, default (또는 black)로 설정해 버리고 싶습니다.

사이고에게



디자이너의 내가 쓰는 것도 무엇이지만,
현재 디지털 퀘스트에서는 엔지니어 프로그래머를 모집하고 있습니다 (통년 채용)!

느긋하게 즐거운 동료와 시비되는 개발하지 않습니까?

잘 부탁드립니다.

좋은 웹페이지 즐겨찾기