ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)

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

一、在Head里增加metalink标签

保存到桌面时将页面转成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里保存到桌面就能有对应的图标以及对应的名字

ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第1张图片ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第2张图片

 

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

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

ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第3张图片

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

三、解决屏幕旋转的问题

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

游戏平台变成这样

 

ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第4张图片游戏变成这样

 

ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第5张图片

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

ios-Safari保存H5网页到主屏幕-WapApp(H5全屏,自动旋转适配)_第6张图片

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

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

 

你可能感兴趣的