固定位置不正確谷歌應用程序內的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工作

回答

相關問題