iPad Home Screen Web App Failure_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-22 11:24 出处：网络

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

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 TIT开发者_如何学编程LE</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)

Try to add a manifest file, read more here

https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html