固定位置在 iOS10 上的 Google App 中无法正常工作

Posted

技术标签:

【中文标题】固定位置在 iOS10 上的 Google App 中无法正常工作【英文标题】:fixed position not working correctly within Google App on iOS10 【发布时间】:2017-08-17 08:43:09 【问题描述】:

背景

有一个 ios 应用程序,名为“Google - 专为移动设备制作的搜索”(它是该应用程序中的某种内部浏览器)。我们的团队被要求支持它。

我们有一个按钮,应该放在视图的底部,所以我们选择了position: fixedbottom: 60px 来满足这个要求。

环境

设备:iPhone7 iOS:10.3.3 古尔应用:33.0.164895372

问题

Safari:工作 铬:工作 谷歌应用程序:不工作。似乎 google-app 的内部浏览器永远不知道正确的视口高度,在垂直滚动时,按钮要么显示在正确的位置,要么只是丢失(低于实际视口底线)

我什至尝试使用父容器(全屏)position: absolute,但没有运气

以前有人见过这个问题吗?我们应该如何解决它?

【问题讨论】:

【参考方案1】:

我在 iOS 上的 Google App 中遇到了同样的问题。一个 100% 高度的网站,上面和下面都有绝对定位的元素。

原因

Google App 中的视口高度被正确检测到,但默认情况下,Google App 会将其地址栏放在网站的顶部,并将其他一些栏放在网站的底部。因此,这些属于 Google 应用的元素就像您网站上的绝对定位元素。

但是,当您打开网站时,Google 应用程序会“向下滚动”一点网站,以便网站顶部位于地址栏下方(否则您的网站顶部将被隐藏。但这会推动整个像向下 30px 的网站,对于 100% 高度的网站,它看起来像视口是 100% + 30px。当您滚动一点顶部的地址栏和底部的另一个栏消失时,网站将显示完美。

解决方法

向主体添加一个指令,将应用程序的高度重新调整为视口的内部高度。在我的情况下工作。

<body force-full-height>
      <!-- Your content -->
</body>

...

(function () 
    var app = angular.module('my.directives', []);

    app.directive('forceFullHeight', forceFullHeight);

    forceFullHeight.$inject = [
        '$window',
        '$rootScope'
    ];

    function forceFullHeight($window, $rootScope) 
        return 
            restrict: 'A',
            link: function link(scope, element, attrs) 
                function onResize() 
                    element.css('height', $window.innerHeight + 'px');
                ;

                function cleanUp() 
                    angular.element($window).off('resize', onResize);
                

                angular.element($window).on('resize', onResize);
                scope.$on('$destroy', cleanUp);

            scope.$on('$viewContentLoaded', onResize());
            
        ;
    
)();

【讨论】:

【参考方案2】:

iOS 上的 Google App 版本 57.0 修复了该问题。 页眉栏和页脚栏现在改变 webview 的高度。

【讨论】:

以上是关于固定位置在 iOS10 上的 Google App 中无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Google App Engine 上的传出 HTTP 请求位置

IOS : Cordova App Crash on Google Map api zoom in ios 11.3 iphone x

iOS 10 Safari:防止在固定覆盖层后面滚动并保持滚动位置

Google App Engine 和 Socket.IO 上的移动聊天应用程序

Android / iOS 应用内浏览器上的证书固定

APNS 不适用于 Google App Engine 上的 AdHoc 分发配置文件