固定位置在 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: fixed
和bottom: 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:防止在固定覆盖层后面滚动并保持滚动位置