[新增到主屏幕"在Android的按钮不显示网站作为一个Web应用程序作为一个、应用程序、按钮、屏幕

2023-09-12 11:03:51 作者:TRANSFORMER(变形女)

我已经创建了一个移动友好的网站使用jQuery Mobile并增加了一些元信息,以便它应该被固定到iOS和Android homescreens,应该推出一个Web应用程序(即:在浏览器中,但没有浏览器的导航元素)。

I've created a mobile-friendly web site with jQuery Mobile and added some meta info so that it should be pinned to iOS and Android homescreens and should be launched as a web app (in other words: in a browser, but without browser navigation elements).

它工作正常的iOS,但它并没有为Android 4.4.2的工作。

It works fine for iOS, but it doesn't work for Android 4.4.2.

我跟着这个教程创建的Andr​​oid兼容的Web应用程序:

I followed the this tutorial for creating Android-Compatible web apps:

http://www.mobilexweb.com/blog/home-screen-web-apps-android-chrome-31

下面是我创建的网站:

http://www.logmytime.de/Profile/LogOn?forcemobile=true

尽管将所有的元信息在本教程中列出的Andr​​oid的确显示添加到主屏幕按钮,我的网站,但没有启动,而不在本教程中介绍浏览器的导航元素的网站。

Despite adding all the meta info as listed in the tutorial, Android does show the "Add to homescreen" button for my web site, but it does not launch the website without browser navigation elements as described in the tutorial.

我是什么做错了吗?

推荐答案

正如你所看到的这里此功能仍然标记为测试版。我猜你需要与Chrome浏览器的最新版本测试此功能。 从文章:

As you can see here this feature is still tagged as Beta. I guess you'll need to test this feature with the latest version of Chrome. From the article:

Chrome会寻找以下meta标签,在网页的元素:

Chrome will look for the following meta tag in the element of the web-page:

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

name属性必须是移动网络应用能力和内容属性必须是是(案例大小写)。如果在内容上任何其他属性值的Web应用程序将被添加作为一个普通的书签。

The name attribute MUST be "mobile-web-app-capable" and the content attribute must be "yes" (case in-sensitive). If there is any other value in the content attribute the web app will be added as a regular bookmark.

这是用来安装到主屏幕上的图标通过使用一个发现的最大的图标确定以下&LT;链接&GT; 标签:

The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following <link> tags:

<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

的警告的:该192px图像格式建议。最后两种格式(苹果触摸*)是pcated德$ P $,并且将很短的时间才支持。

Caution: The 192px image format is recommended. The last two formats (apple-touch-*) are deprecated, and will be supported only for a short time.

应用程序的&LT;冠军&GT; 元素充当主屏幕上的图标默认标签

The application’s <title> element serves as the default label for the icon on the homescreen.

下面的例子是所需的最小的配置,以支持一个主屏幕发射经验

The following example is the minimum required configuration to support a homescreen launch experience.

<!doctype html>
<html>
   <head>
     <title>Awesome app</title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

比较到iOS Safari浏览器添加到主屏幕

Chrome浏览器也将允许Web应用程序推出的应用模式,如果他们使用嵌入的苹果移动网络应用能力的名称的元标记。 Chrome将停止在即将到来的版本支持这种用法。 Chrome浏览器目前显示了开发者工具控制台日志中去precation警告检测只用苹果移动网络应用能力的元标记的网页时。警告显示如下:

Comparison to iOS Safari Add to Homescreen

Chrome will also allow Web Apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools’ console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:

虽然Chrome浏览器暂时接受了苹果移动网络应用能力的,Chrome不提供与iOS的Safari浏览器的API包括兼容性的用法:

Whilst Chrome temporarily accepts the usage of "apple-mobile-web-app-capable", Chrome does not offer compatibility with the iOS Safari API’s including:

window.navigator.standalone
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/startup.png">

我希望它能帮助。

I hope it helps.