背景
有一款iOS应用，名为“Google - 专为移动设备搜索”（这是该应用中的某种内部浏览器）。我们的团队被要求支持它。
我们有一个按钮，应放在视图的底部，因此我们选择position: fixed和bottom: 60px来使此要求有效。
Evnironment
设备：iPhone7 iOS：10.3.3 goole app：33.0.164895372
问题
Safari：工作 Chrome：工作 Google-app：不行。似乎google-app的内部浏览器永远不知道正确的视口高度，同时给出垂直滚动，按钮显示在正确的位置，或者只是丢失（低于真实的视口底线）
我甚至尝试使用父容器
position: absolute（屏幕的完整大小），但没有运气
有没有人见过这个问题？我们该如何解决？
答案 0 :(得分：0)
我在iOS上的Google App中遇到了同样的问题。一个100％高度的网站，上面和下面都有一个绝对定位的元素。
<强>原因
Google App中的视口高度被正确检测到，但Google App默认位于网站顶部的地址栏顶部，以及网站底部的其他一些栏。因此，属于Google App的这些元素就像是在您的网站上绝对定位的元素。
然而，当您打开网站时，Google App＆＃34;向下滚动＆＃34;有点网站，所以网站的顶部在地址栏下面（否则你的网站的顶部将被隐藏。但是这会推动整个网站像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());
}
};
}
})();
答案 1 :(得分：0)
iOS上的Google App版本57.0解决了该问题。 页眉和页脚栏现在可以更改Webview的高度。