禁止隐藏手机上的地址栏
[英]Disable hiding of address bar on mobile
问题描述
I'm working on a mobile website which has "pages" that have div's which take up the screens full size and you can scroll between each one.
我正在开发一个移动网站，该网站的“页面”具有 div 占据屏幕全尺寸，您可以在每个页面之间滚动。 The problem is, the window resizes whenever a user scrolls downward because the address bar hides.问题是，每当用户向下滚动时，window 都会调整大小，因为地址栏隐藏了。 This causes problems when you scroll to the complete bottom and the address bar then hides.当您滚动到完整的底部并且地址栏随后隐藏时，这会导致问题。
Is it possible to have the address bar always show on mobile devices?是否可以让地址栏始终显示在移动设备上？
4 个解决方案
解决方案1
9 已采纳 2014-04-19 01:20:22
You can wrap your HTML with div and do something like this: http://jsfiddle.net/DerekL/Fhe2x/show 您可以使用div包装HTML并执行以下操作： http ： //jsfiddle.net/DerekL/Fhe2x/show
$("html, body, #wrapper").css({
height: $(window).height()
});
It works on Android and iOS. 它适用于Android和iOS。
解决方案2
1 2016-09-18 11:10:55
The simplest way to achieve this is to scroll in a container, rather than scrolling the document. 实现此目的的最简单方法是滚动容器，而不是滚动文档。
Eg: 例如：
<html><body>
<div id="scrollable-content"> ... all your content here ... </div>
</body></html>
html, body {
height: 100%;
}
#scrollable-content {
height: 100%;
overflow-y: scroll;
}
解决方案3
0 2014-04-19 01:18:30
Are you looking at iPhone? 你在看iPhone吗？ I don't know about Android, but on iOS 7 for iPhone it's not possible. 我不知道Android，但在iOS 7 for iPhone上它是不可能的。 One thing you could do is use minimal-ui to have an always-minimized navigation bar, keeping a consistent size for the window: 您可以做的一件事是使用minimal-ui来创建一个始终最小化的导航栏，保持窗口的大小一致：
<meta name="viewport" content="width=device-width, minimal-ui">
http://visuellegedanken.de/2014-03-13/viewport-meta-tag-minimal-ui/ http://visuellegedanken.de/2014-03-13/viewport-meta-tag-minimal-ui/
I hope that helps! 我希望有所帮助！
解决方案4
0 2022-08-18 14:09:07
Since this problem arises on mobile so use media query and put the position of your body and html as "fixed", Now, you will be see that the search bar does not hide.由于此问题出现在移动设备上，因此使用媒体查询并将您身体的 position 和 html 设置为“已修复”，现在您会看到搜索栏没有隐藏。 But for pages which have to be scrolled it will not scroll.但是对于必须滚动的页面，它不会滚动。 To solve that, use overflow-y: scroll;要解决这个问题，请使用 overflow-y: scroll;
@media only screen and (max-width: 500px){ /* to prevent auto hiding of the search bar */ body, html{ height: 100%; position: fixed; width: 100%; overflow-y: scroll; } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.