Question

如何在iPhone上隐藏地址栏？

到目前为止，我尝试了两种不同的方法：

在页面加载时向下滚动一个像素技巧

以下元标记：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />

还有：

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

我完全糊涂了。

PS：哦，我忘了一个非常重要的事情：网页本身不会溢出浏览器窗口。这可能是1像素滚动技巧不起作用的原因。

我不能把它变得更大，因为关于设计的热门话题，每个人都可以滚动，但这个页面折叠......：）

Answer 1

我自己就是这样打的。如果地址栏没有隐藏，原因可能只是页面不够长而无法滚动。

当

window.scrollTo(0,1)

被称为页面 MUST 比窗口长，因此可以发生滚动事件。

只有在滚动均匀发生时，移动版Safari才会隐藏地址栏。

Answer 2

除非在最近的iOS版本中发生了某些变化，否则向下滚动技巧是唯一能够可靠运行的技巧，我对this version没有任何问题：

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
  window.scrollTo(0, 1);
}, 1000);

我不关心这个特定页面的任何其他移动平台，但它是基于代理重定向...你可能想要更改正则表达式以专门检查iPhone，例如将/mobile/替换为/iPhone/。

Answer 3

我认为这个版本实际上更好。它测试用户是否已经开始滚动，这是我在移动项目中注意到的一个问题。

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
    if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);

Answer 4

更新： Apple removed支持iOS 8中的minimal-ui，因此这不再是一个有用的答案：（

对于新搜索者：从 iOS 7.1 开始，有一种适用于移动版Safari的新minimal-ui模式：

minimal-ui

通过在视口上设置minimal-ui属性来启用它：

<meta name="viewport" content="minimal-ui">

您也可以将其与其他属性结合使用：

<meta name="viewport" content="width=device-width, minimal-ui">

值得注意的是，没有与scrollTo黑客一样的最低内容长度要求。这个新模式here有一个很好的概述。（这就是上面图片的来源。）他还列出了一些缺点。

我能找到的唯一官方文档是Apple's iOS 7.1 release notes中的注释：

为视口元标记键添加了一个属性minimal-ui，允许在页面加载时最小化iPhone上的顶部和底部栏。在使用minimal-ui的页面上，点击顶部栏会使栏回来。回顾内容会再次驳回它们。

例如，使用<meta name="viewport" content="width=1024, minimal-ui”>。

当然，由于仅适用于iOS 7.1及以上版本，因此它的实用性可能有限。

Answer 5

我也在这个全屏网络应用程序中搜索，并且找到了。

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1。基本上，您需要在标题中添加以下内容：

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />

//App name
<meta name="apple-mobile-web-app-title" content="App name" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

//APP ICONS 
<link rel="apple-touch-icon" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">

在Safari中打开网站
点击网址栏上刷新按钮旁边的“打开方式”图标（向上的箭头和其下方的框）
选择“添加到家庭屏幕”
转到主屏幕并打开“应用名称”
Voila！没有网址栏或导航按钮的网站！

Answer 6

<meta name="apple-mobile-web-app-capable" content="yes" />

iPhone Configuring Web Applications

Answer 7

尝试：

setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);

如果使用jQuery，请将其放在$(document).ready();的末尾。超时允许浏览器确定页面的高度......

Answer 8

您可以在网站内容准备就绪时运行该功能，而不是使用超时

addEventListener("load", function() {
    window.scrollTo(1, 0);
}, false);

Answer 9

我认为除非内容超过浏览器窗口，否则永远不会解决。

以下是一些代码，可以在加载，方向更改和触摸开始时隐藏URL（仅当您拥有持久隐藏的URL时才会使用touchstart，这是其他一些蠕虫 - 如果您不喜欢不，删除脚本的那一部分。

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}

Answer 10

如果这些解决方案都不起作用，并且您遇到了我所遇到的非常狭窄的问题，那么这就是为我解决的问题。

我在CSS中有这个

html{position: relative; height: 100%; overflow: hidden;}

此css仅对我的某个页面应用修复，因此我将条件限制为该页面，并且地址栏现在在所有其他页面上都正常运行。

Answer 11

<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes">

这用于在没有搜索栏的情况下将ios网络应用添加到主屏幕。

如何在iPhone上隐藏地址栏？

11 个答案: