关于iphone的H5,页面分享到 主屏幕的 全屏显示问题

1. 关于主屏幕显示问题 ，问题2 ，样式兼容问题， iphone 官网都做了  支持

主要用 官方的api，

      一 、主屏幕显示问题

　　       1、显示全屏  使用 ihpone 专用的api

　　　　　　<meta name="apple-touch-fullscreen" content="yes">："添加到主屏幕“后，全屏显示

　　　　　　<meta name= ”apple-mobile-web-app-status-bar-style” content=black” />   头部 的透明色问题，什么样色

　　　　　　<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />  分享到主屏幕上面的  图标显示问题

　　　　2、主屏幕上面的 显示，只能是单页面，要不然 跳转页面之后，顶部会出现一个完成按钮

　　　　　　目前使用的解决办法，使用iframe 标签的 src 切换 跳转， html 页面嵌套的方式解决这个问题

 

　　二、头部与底部样式兼容的问题

　　　　1、 注意页面没有设置固定高度，页面没有铺满的时候，vue的底部tab 会被顶上来， 解决办法设置height 为100% +一点高度 ，因为 safari 显示的是被顶上去之后的100%

　　　　2、 注意头部，底部的 样式兼容刘海屏 与  底部横线  使用

• 屏幕上安全距离: safe-area-inset-top
• 屏幕右安全距离: safe-area-inset-right
• 屏幕下安全距离: safe-area-inset-bottom
• 屏幕左安全距离: safe-area-inset-left

1. padding-top: constant(safe-area-inset-top);
2. padding-top: env(safe-area-inset-top);

   有时候不确定是哪个会生效，都写上比较好

 

使用这个函数解决 判断是不是 iphone 全屏显示的判断

if (('standalone' in window.navigator) && window.navigator.standalone) {
　　var noddy, remotes = false;
　　document.addEventListener('click', function (event) {　　　　
　　　　noddy = event.target;
　　　　while (noddy.nodeName !== 'A' && noddy.nodeName !== 'HTML') noddy = noddy.parentNode;
　　　　　　　　if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !==-1 || remotes)) {
　　　　　　　　　　event.preventDefault();
　　　　　　　　　　document.location.href = noddy.href;
　　　　　　　　　}
　　}, false);
}