背景
有一个 iOS 应用程序，名为“Google - 专为移动设备制作的搜索”(它是该应用程序中的某种内部浏览器)。我们的团队被要求支持它。
我们有一个按钮，应该放在 View 的底部，所以我们选择了 position: fixed 和 bottom: 60px 来满足这个要求。
环境
设备:iPhone7 iOS:10.3.3 古尔应用:33.0.164895372
问题
Safari:工作 Chrome :工作 谷歌应用程序:不工作。似乎 google-app 的内部浏览器永远不知道正确的视口(viewport)高度，在垂直滚动时，按钮要么显示在正确的位置，要么只是丢失(低于实际视口(viewport)底线)
I even tried
position: absolutewith a parent container(full size of the screen), but no luck
以前有人见过这个问题吗？我们应该如何解决它？
我在 iOS 上的 Google App 中遇到了同样的问题。一个 100% 高度的网站，上面和下面都有绝对定位的元素。
原因
Google App 中的视口(viewport)高度被正确检测到，但默认情况下，Google App 会将其地址栏放在网站上方，并在底部其他栏也放在网站上方。因此，这些属于 Google 应用的元素就像您网站上的绝对定位元素。
但是，当您打开网站时，Google 应用会“向下滚动”一点网站，以便网站顶部位于地址栏下方(否则您的网站顶部将被隐藏。但这会插入整个像向下 30px 的网站，对于 100% 高度的网站，它看起来像视口(viewport)是 100% + 30px。当您滚动一点时，顶部的地址栏和底部的另一个栏消失，网站将显示完美。
解决方法
向主体添加一个指令，将应用程序的高度重新调整为视口(viewport)的内部高度。在我的情况下工作。
<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());
}
};
}
})();
关于ios - 固定位置在 iOS10 上的 Google App 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45730409/
| 欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/) | Powered by Discuz! X3.4 |