ios-Safari保存H5网页到主屏幕-WapApp（H5全屏，自动旋转适配）

注：本文介绍H5网页在ios下可以通过保存到主屏幕的方式，让用户体验到类似原生应用的感觉，在ios难以过审的如今，这也不乏是一种退而求其次的方法。

一、在Head里增加meta与link标签

保存到桌面时将页面转成webApp的形式，不加的话还是会打开浏览器

单独设置app的title，如果不设会读取网页的title

 

苹果官方参考文档：

 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6

到此用户在safari里保存到桌面就能有对应的图标以及对应的名字

 

二、解决WebApp页面跳转后显示完成的问题

因为我们的网站不是一个单页面，会有跳转，页面跳转后在顶部会有“完成”按钮

为了解决这个问题，可以在最外层套一个iframe，强制变成单页面，但随之而来一系列position:fix在ios的iframe下会有兼容问题，建议在页面切换后都调用下 window.scroll(0,0)

三、解决屏幕旋转的问题

webAPP不像自己开发的APP可以禁止屏幕旋转，游戏如果没有做横屏的适配，样式会很奇怪

游戏平台变成这样

 

游戏变成这样

 

我们能监听到用户旋转，但没法禁止用户旋转屏幕，所以只能提示用户锁定旋转，当用户旋转屏幕时我们会给下列提示

监听屏幕旋转，并显示对应图片

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
var  $print =  $('iframe');
window.addEventListener(evt, function() {
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    if(width>height || window.orientation == 90 || window.orientation == -90){
        document.body.className = 'landscape';
        if(window.orientation == -90){
            document.querySelector('#pnl_landscape_img').className="rotate";
        }else{
            document.querySelector('#pnl_landscape_img').className="";
        }

    }else{
        document.body.className = '';
        $print.css('top',  0 );
        $print.css('left',  0 );
        setTimeout(function(){
            $print.width(width);
            $print.height(height);
            window.scrollTo(0,0)
        },10)
    }
} ,false)

 

最后旋转后延时10ms去重设高度，并滚到顶部，是为了解决ios下旋转后显示偏移的问题

 

相关参考文档

https://www.jianshu.com/p/9c3264f4a405 https://yq.aliyun.com/articles/394148 https://blog.csdn.net/weixin_34344677/article/details/88906092