iOS 웹 앱 apple-mobile-web-app-capable 문제

현재 Asp.net MVC 및 jQuery mobile을 사용하는 작은 웹 앱을 작성 중입니다. 데스크톱 테스트 환경과 iPad의 Safari 브라우저에서는 모든 것이 잘 렌더링됩니다. 그러나, 내가 머리에 <meta name="apple-mobile-web-app-capable" content="yes" />을 추가하면 나는 이상한 행동을하기 시작한다. 내가 사과 모바일 웹으로 '홈 화면'아이콘에서로드하려고 할 때마다 충돌 할 첫번째 사파리에서iOS 웹 앱 apple-mobile-web-app-capable 문제

<%@ 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);">

: 여기

아래의 설명은 내 간단한 테스트 로그인 페이지의 시작입니다 -app-capable content = "yes"가 아니라 content = "no"또는 누락 된 경우. 테스트를 통해 사파리가 충돌하지 않는 스플래시 이미지를 주석 처리했지만 이상한 코드가로드 될 수 있음을 발견했습니다. 사파리 크롬이에 가정처럼 사라질 것입니다 만 몸에서이 텍스트를 표시합니다 :이 페이지의 제목과 본문에 일반 텍스트로 머리에서 내 자바 스크립트를 나열하기 때문에

Test App function BlockMove(event) { // Tell Safari not to move the windowevent.preventDefault();} Mobile: Password:

이 이상하다 . 그 위에 자바 스크립트 또는 CSS가 실행되고 있지 않습니다. 이전에 말했듯이 정상적인 iOS Safari 브라우저에서 제대로 작동하거나 apple-mobile-web-app-capable가 없거나 no로 설정된 경우이 동작은 이상합니다. 내가 찾은 사파리 충돌 로그가 있지만 소스가없는 사람들과별로 할 수없는 것을 이해하고 있습니다.

왜 이런 일이 벌어 질 수 있는지에 대한 통찰력은 내가 잃어버린 것이므로 크게 감사하겠습니다. 나는 운이없는 같은 문제를 가진 다른 누군가를 찾으려고 노력하는 날을 찾고 있었다. 다행히도 내가 간과하는 것은 간단합니다. 감사.

출처

2012-02-17 PJH

동일한 문제가 있습니다. 지금까지 내가 결정할 수 있었던 것은 웹 사이트에 정상적으로 액세스 할 때와 응용 프로그램으로 액세스 할 때 사용자 에이전트 문자열이 다르다는 것입니다.

응용 프로그램으로 액세스 할 때 사용자 에이전트 문자열에 페이지가 ASP.NET을 인식하지 못하고 브라우저가 아닌 자바 스크립트를 포함하여 브라우저로 렌더링되도록하는 정보가 누락되었습니다. 이것은 당신이보고있는 행동으로 이어집니다.

솔루션을 제공하는이 링크를 찾았지만 아직 제대로 작동하지 않습니다.

http://blog.lavablast.com/post/2011/05/29/Gotcha-iPad-versus-ASPNET.aspx

출처

2012-02-20 18:11:07

감사합니다. 그것은 모든 테스트가 그 가능성을 가리키고 있기 때문에 꽤 흥미 롭습니다. 나는 그것이 규칙적인 사파리에서 멋지게 렌더링 될 것이지만 집의 아이콘으로는 왜 잘되지 않을지 이해할 수 없었다. 나는 오늘 그 해결 방법을 줄 것이다. – PJH

최근의 몇 가지 테스트에서 흥미로운 점이 하나 있습니다. ContentType을 다시 application/xhtml + html로 변경하여 C#으로 코딩 된 HTML 요소를 <% : Html.TextBoxFor (model => model.LoginID) %>'와 같이 표시 할 수 있습니다. 다시 한번 이것은 web-app-capable가 있고 yes로 설정된 경우에만 해당됩니다. 다행히이 중 하나 또는 둘 모두가이 기괴한 행동을 해결하는 데 도움이 될 수 있습니다. – PJH

iOS 웹 앱 apple-mobile-web-app-capable 문제

답변

관련 문제