标签: mobile-chrome

AngularJS应用程序在桌面上运行良好,但在移动设备上无法正常呈现(实际代码正在显示).这是在Android手机上.

我想看看控制台中显示的错误.

是否可以在移动设备上的Chrome应用程序上打开JS控制台(就像在桌面上一样)？

单击(触摸)iOS中的链接(或chrome或firefox)时,链接后面会出现灰色背景(仅在您持有时).有没有办法使用CSS删除此功能？

请参阅下面的示例图片:

我有一个网页,我们可以打电话给它entry.html.

当用户进入此页面时,javascript代码(见下文)正在尝试将用户深层链接到本机iOS/Android应用程序.

如果深层链接失败(可能是因为设备上没有安装应用程序),用户应该"退回"到另一个页面 - 让我们调用它fallback.html.

这是运行的javascript代码entry.html:

$(function(){
    window.location = 'myapp://';
    setTimeout(function(){
        window.location = 'fallback.html';
    }, 500);
});

这是一种标准的深层链接方法,建议在整个网络中使用; 尝试深层链接,如果超时触发它意味着深层链接没有发生 - 所以回退.

这很好用,因为设备上安装了很长的应用程序.

但是如果没有安装应用程序,这是尝试深层链接时的行为:

移动Safari:我看到一条警告消息说"Safari无法打开此页面......"片刻,然后它正确地回落fallback.html- 这是预期的行为.

移动Chrome是我的问题.

当没有安装应用程序时,浏览器实际上被重定向到myapp://网址,这当然是无效的 - 所以我得到一个"未找到"页面,并且不会发生回退.

最后 - 我的问题是:

如何修复我的代码,以便FALL-BACK也会在移动Chrome上发布？就像移动Safari一样？

注意:我看到LinkedIn移动网站正确地使用Safari和Chrome,无论是否安装了应用程序,但我无法追踪负责它的代码:(

注意2:我尝试添加一个iframe而不是window.location = url,这只适用于Safari,即使安装了应用程序,移动Chrome也不会在追加iFrame时进行深层链接.

谢谢大家!

更新:

我找到了一个不错的解决方案,并回答了我自己的问题 看到我的解决方案的已接受答案

在Safari动画延迟中,我在Safari中遇到了令人沮丧的错误.

这个动画在Chrome,Firefox,IE11,IE10的桌面上运行得非常漂亮,但我在Safari中获得了不同的结果.在等量的暂停(由动画延迟控制)之后,包的各个部分都应该显示.

桌面Safari有时会正确显示,而其他时候会减慢行李过渡的第一部分并加速结束,或者它会将几个过渡组合在一起.在iPhone 6上的移动Safari和移动Chrome中,有时它会一起忽略动画延迟并立即转换整个行李.当性能不一致时,我很难排除故障.我添加了一些JavaScript以确保在开始动画之前所有资源都已加载到页面上,但这似乎没有帮助.任何人都知道这里发生了什么？

http://codepen.io/brendamarienyc/pen/qdoOZM

@-webkit-keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
@keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
.satchel-1 {
  -webkit-animation-name: bag-1;
          animation-name: bag-1;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-1 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-2 {
  0%, 
    39.9% {
    opacity: 0;
  }
  40%,
    100% { …

我几次遇到这个问题，想知道是否有解决这个问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。

如您所见，底部被切除。

当我向下滚动时，它看起来像这样：

现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：

有没有办法，不管有没有地址栏，它看起来都一样？这样容器会膨胀吗？

我希望能够通过 JavaScript 或某种 HTML 元标记禁用移动 Chrome上的点击搜索/触摸搜索功能，该功能每次在浏览器底部都会显示一个横幅用户长按/点击任何文本段落中的单词。