固定位置不正确谷歌应用程序内的iOS10工作

背景固定位置不正确谷歌应用程序内的iOS10工作

有一个iOS应用程序，只是称“谷歌 - 搜索做只是为了移动”（这是一些内部浏览器的这个应用程序内）。我们的团队被要求支持它。

我们有一个按钮，它应该放在视图的底部，所以我们选择position: fixed和bottom: 60px来满足这个要求。

Evnironment

设备：iPhone7 的iOS：10.3.3 古尔应用：33.0.164895372

问题

Safari浏览器：工作铬：工作谷歌应用程序内：不行。看来Google应用程序内的内部浏览器永远不知道正确的视口的高度，而在正确的地方给人一种垂直滚动，按钮或者显示器，或者只是缺少（比真视底线更低）

我甚至尝试position: absolute与父容器（全尺寸的屏幕），但没有运气

有没有人看过这个问题？我们应该如何解决它？

来源

2017-08-17 Howard

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

原因

正确地检测到谷歌应用程序的视口的高度，但谷歌应用程序投入的默认顶部他的地址栏上的网站，并在底部的一些其他酒吧如逢过的网站。因此，属于Google应用的这些元素就像您网站上绝对定位的元素。

但是，当您打开网站时，Google App会“向下滚动”一些网站，以便网站顶部出现在地址栏下方（否则网站的顶部将会隐藏。整个网站如30px，其中100％高度的网站使其看起来像视口为100％+ 30px。当您滚动一下时，顶部的地址栏和底部的其他栏消失，网站将会完美展现。

解决方法

一个指令添加到重新调整应用程序的高度与viewpo的innerheight身体RT。在我的情况下工作。

<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()); 
      } 
     }; 
    } 
})();

来源

2018-01-29 14:45:29

固定位置不正确谷歌应用程序内的iOS10工作

回答

相关问题