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