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-capable 를 yes 로 하는 안건이 있고, 오목을 어떻게 할까, 어떻게든 할 수 있을까 아니면 할 수 없는지 생각할 정도라면, default (또는 black)로 설정해 버리고 싶습니다.사이고에게
디자이너의 내가 쓰는 것도 무엇이지만,
현재 디지털 퀘스트에서는 엔지니어 프로그래머를 모집하고 있습니다 (통년 채용)!
느긋하게 즐거운 동료와 시비되는 개발하지 않습니까?
잘 부탁드립니다.
Reference
이 문제에 관하여(iPhone X (iOS11)의 Apple-mobile-web-app-status-bar-style), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matri/items/da27143d66bcd02a1a8a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
