从浏览器中删除地址栏(在 Android 上查看)

IT技术 javascript android mobile
2021-01-16 06:26:45

有谁知道如何从 Android 浏览器中删除地址栏以更好地查看我的网络应用程序并使其看起来更像本机应用程序?

6个回答

你可以用下一个代码来做到这一点

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

我希望它能帮助你!

同意沃洛迈克。我只能使用下面的@meagar 代码让我的浏览器地址栏消失。
2021-03-20 06:26:45
请注意,这仅在您有足够的页面内容需要滚动页面时才有效。如果你不这样做,那么你应该添加一堆 <br /> 标签或使用 CSS 在页面高度上添加更多空间。这在检测视口高度并将必要的空间添加到页面高度的 jQuery 函数中会很棒。
2021-04-01 06:26:45
结合 body { min-height: calc(100vh + 1px); }
2021-04-10 06:26:45
另一个问题是,当用户导航回页面时,浏览器通常会恢复页面上的位置。使用 window.scrollTo 覆盖了这个对大多数用户来说很烦人的内置功能。
2021-04-11 06:26:45

这是非 jQuery 解决方案,它无需滚动即可立即删除地址栏。此外,它可以在您旋转浏览器的方向时起作用。

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

它也应该适用于 iPhone,但我无法对此进行测试。

@jowo:我认为他只使用超时,因为他想在单独的线程中运行代码(当它“中断”时,它不会停止其他脚本并尽可能地平滑,其他脚本不必等待)。但是在执行此操作时,我建议使用 10 毫秒延迟来执行此操作,因为该函数可能在为零时不会触发(在某些浏览器上可见)。此外,还将滚动条检查置于超时时间。
2021-03-24 06:26:45
window.outerHeight/window.devicePixelRatio这有效!非常感谢你。
2021-03-28 06:26:45
@Erwinus:超时的原因是滚动发生在“load”或“orientationchange”的事件处理完成之后(就脚本而言,JavaScript始终单线程的)。我指出的错误是他在 hideAddressBar 中调用 scrollTo(1,1),然后将 scrollTo 的返回值传递给 setTimeout。相反,它应该是: setTimeout(function() { window.scrollTo(1,1); },0)
2021-03-29 06:26:45
我认为您打算将 scrollTo() 调用放在一个匿名函数中以便 setTimeout() 调用?
2021-04-07 06:26:45
似乎这在 iOS (6+) 上不再适用了,对此有何想法?jsbin.com/awedem/2
2021-04-07 06:26:45

如果你已经加载了 jQuery,你可以看到内容的高度是否大于视口高度。如果没有,那么您可以将其设置为那个高度(或稍微小一点)。我在 Android 模拟器中以 WVGA800 模式运行以下代码,然后在我的三星 Galaxy Tab 上运行它,在这两种情况下它都隐藏了地址栏。

$(document).ready(function() {

  if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,0); // reset in case prev not scrolled  
    var nPageH = $(document).height();
    var nViewH = window.outerHeight;
    if (nViewH > nPageH) {
      nViewH -= 250;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

});
在 Safari 中删除地址栏:Web App Meta Tag
2021-03-17 06:26:45
我建议将“Android”上的匹配更改为“Mobile”上的匹配。这将支持 iPhone 和可能的其他移动平台。
2021-03-19 06:26:45
谢谢,您的解决方案在我的 Galaxy S 上运行良好。但是,没有适用于 Safari 的解决方案吗?在 iphone 4 上,它似乎不起作用。
2021-03-25 06:26:45
它在 iPhone 上不起作用,因为 iOS 不允许您隐藏地址栏,除非您和您的用户执行以下步骤:matt.might.net/articles/...
2021-04-11 06:26:45
@meagar 非常感谢这段代码。在我的索尼爱立信 Xperia Play (Android 2.3) 上运行良好。但是,当导航回包含此代码的屏幕时,页面将快速向下倾斜(想要显示浏览器地址栏),(因为您的代码)地址栏将快速向上滑动。我怎样才能阻止这种“生涩”的动作?是否可以检测浏览器地址栏是否已经隐藏,以便我可以在这种情况下绕过 yr 代码?
2021-04-12 06:26:45

参考Volomike 的回答,我建议更换这条线

nViewH -= 250;

nViewH = nViewH / window.devicePixelRatio;

它的工作原理与我在 HTC Magic (PixelRatio = 1) 和 Samsung Galaxy Tab 7" (PixelRatio = 1.5) 上的检查完全一样。

请注意 nViewH 变量名称上的大小写类型。该行应该是: nViewH = nViewH / window.devicePixelRatio;
2021-03-18 06:26:45
是的,这部分适用于三星 Ace 2,它在第一次从快捷方式打开页面然后刷新时不起作用,在第二次刷新时起作用。请问这个活动可以修改吗?否则,它仍然是比让糟糕的地址栏占据屏幕区域更好的解决方案。
2021-04-05 06:26:45

下面的那个每次都对我有用..

该站点还有一些其他建议,但这个严肃、无忧的建议可在 github:gist 中找到并回答您的问题(为方便起见,粘贴在此处):

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

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

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

据我所知,添加到页面的额外高度(这给您带来了问题)和 scrollTo() 语句的组合使地址栏消失。

在同一站点,隐藏地址栏的“最简单”解决方案是使用 scrollTo() 方法:

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

这将隐藏地址栏,直到用户滚动。

该站点在超时函数中放置了相同的方法(没有解释理由,但它声称没有它代码就无法正常工作):

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
     window.scrollTo(0, 1);
  }, 0);
});