iPad 主屏幕 Web 应用程序故障

发布于 2024-10-30 20:37:42 字数 1521 浏览 1 评论 0原文

我们有一个 ipad Web 应用程序，需要它能获得的所有屏幕空间。计划是在应用程序完成后使用“添加到主屏幕”功能。然而，通过主屏幕启动应用程序时我们遇到了一个主要问题。使用 HTML5 文档类型时，页面似乎只是呈现为纯文本（没有加载任何样式表或 JavaScript 文件）。相反，使用 XHTML 1.0 Transitional Doctype 会使页面正确呈现，但我们使用的是 jQuery Mobile，它需要 HTML5 Doctype 才能工作。

我尝试过简单地使用“全屏”元标记等，但它们似乎也不起作用。这是我们头代码的当前状态：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!--<!DOCTYPE html>-->

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>PAGE TITLE</title>
    <link href="favicon.png" rel="icon" type="image/png" />


   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />  
   <!-- cut other stylesheets and javascript files being loaded -->
   <link rel="stylesheet" href="/Vertex.Web/Content/style/tablet/tablet.css" type="text/css" media="all" />

根据我所做的研究，听起来 ipad 从主屏幕启动时使用的是 web.app 而不是 safarimobile.app。我想知道这是否至少是问题的一部分。另一种想法是，ipad 在从主屏幕启动时尝试使用本地缓存，并且在加载样式表和 JavaScript 时不喜欢相对路径或外部 URL。

有趣的事实：在页面中使用两种 Doctype 将在我们第一次从主屏幕打开页面时导致正确渲染，但进一步的尝试将由于解析错误而失败（这是预期的，因为这是一个非常非常糟糕的解决方案）

原文

We've got an ipad web app that needs all the screen real estate it can get. The plan is to use the "add to home screen" functionality once the app is done. However, we've run into a major issue when launching the app via the home screen. When using the HTML5 doctype, the page simply seems to render as plain text (none of the stylesheets or javascript files are loaded). Instead, using the XHTML 1.0 Transitional Doctype causes the page to render correctly, but we're using jQuery Mobile, which requires an HTML5 Doctype to work.

I've made attempts to simply use 'full screen' meta tags and such, but they don't seem to work either. This is the current state of our header code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!--<!DOCTYPE html>-->

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>PAGE TITLE</title>
    <link href="favicon.png" rel="icon" type="image/png" />


   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />  
   <!-- cut other stylesheets and javascript files being loaded -->
   <link rel="stylesheet" href="/Vertex.Web/Content/style/tablet/tablet.css" type="text/css" media="all" />

From the research I've done, it sounds like the ipad uses a web.app instead of safarimobile.app when it launches from the home screen. I'm wondering if this is at least part of the problem. One other thought is that the ipad is trying to use a local cache when launching from the home screen, and it's just not liking the relative paths or external URLs when loading stylesheets and javascript.

Fun fact: using both Doctypes in the page will cause correct rendering the first time we open up the page from the home screen, but further attempts will fail due to a parse error (which is expected, since it's a terrible, terrible solution)

分享到QQ

分享到微博