问题
I am currently writing a small web app using Asp.net MVC and jQuery mobile. Everything is rendering fine in the desktop test environment and in Safari browser on the iPad. However, when I add <meta name="apple-mobile-web-app-capable" content="yes" /> to the head I start getting some weird behaviors.
Here is the beginning of my simple test login page for the explanation below:
<%@ Page Title="Test App" Language="C#" Inherits="System.Web.Mvc.ViewPage<TestApp.ViewModels.LoginViewModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="72x72" href="../../../Content/Images/touch-icon-ipad.png" />
<!-- <link rel="apple-touch-startup-image" sizes="1024x748" href="../../../Content/Images/splash-screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="../../../Content/Images/splash-screen-768x1004.png" /> -->
<title>Test App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="../../../Scripts/jquery.1.7.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="Stylesheet" href="../../../Content/jquery-mobile-fluid960.css" />
<link rel="Stylesheet" media="screen" href="../../../Content/mobile.css" />
<script type="text/javascript">
function BlockMove(event) {
// Tell Safari not to move the window
event.preventDefault();
}
</script>
</head>
<body id="login" ontouchmove="BlockMove(event);">
At first Safari would crash every time I tried to load from the 'Home Screen' icon with apple-mobile-web-app-capable content="yes" but not with content="no" or when it was missing. Through testing I found if I commented out the splash images Safari wouldn't crash but would load some weird code. The safari chrome would be gone like it is supposed to but would only show this text in the body:
Test App function BlockMove(event) { // Tell Safari not to move the windowevent.preventDefault();} Mobile: Password:
This is strange because it is listing the page title and my javascript from the head as regular text in the body. On top of that no javascript or CSS is being executed (or so it appears). This behavior is odd because like I said earlier it runs perfectly fine in a normal iOS Safari browser or when apple-mobile-web-app-capable is missing or set to no. I have some Safari crash logs I found but from what I understand not much I can do with those without source.
Any insight on why this could be happening would be greatly appreciated because I am at a loss. I've been searching for days trying to find someone else with the same problem with no luck. Hopefully it is something simple I am overlooking. Thanks.
回答1:
I am having the same issue. What I have been able to determine so far is that the user-agent string is different when accessing the web site normally and when it is accessed as an application.
When accessed as an application, the user-agent string is missing information that leads the page to be rendered as a browser ASP.NET does not recognize and with no capabilities, including javascript. This leads to the behavior you are seeing.
I found this one link that provides a solution, although I have not yet been able to get it to work for me.
http://blog.lavablast.com/post/2011/05/29/Gotcha-iPad-versus-ASPNET.aspx
来源：https://stackoverflow.com/questions/9322656/ios-web-app-problems-with-apple-mobile-web-app-capable