Safari의 iPad WebApp 전체 화면


83

Apple은 Safari HTML 참조 에서 아래 코드가 iPhone OS 2.1 및 이후 버전에서 웹 앱을 전체 화면으로 표시하도록되어 있다고 말합니다 .

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

그러나 작동하지 않는 것 같습니다. iPad WebApp에서 Safari 내의 제목 / 위치 표시 줄을 숨기는 방법이 있습니까?

답변:


120

이것은 홈 화면에 앱에 북마크를 저장 한 후에 만 ​​작동합니다. 사이트를 정상적으로 탐색하는 경우는 아닙니다.


13
이 메타 태그를 이전에 Safari에서 탐색 한 이전 URL 웹 페이지에 추가하는 경우 먼저 URL을 새로 고친 다음 홈 화면에 추가하여 메타 태그가 작동하도록해야합니다.
Scott Chu

이것은 laravel 프로젝트에서 나를 위해 작동하지 않습니다. 나는 이것을 내 app.blade 레이아웃 템플릿에 추가했습니다. 이것은 각 페이지에서 사용되므로 헤더는 각 페이지에 나타나야합니다. 그러나이 게시물에서 언급 한대로 캐시를 지우고 홈 화면 바로 가기를 다시 생성하기 위해 많은 테스트를 수행 한 후에도 여전히 iPhone 및 iPad에 Safari 바가 있습니다. 사파리 바가 숨는 것을 막을 수있는 다른 것이 있습니까? pastebin.com/iSFDXjFz는 여기 내 app.blade.php 파일의 헤드 섹션입니다. 미리 감사드립니다.
Frantumn

14

새 창을 실행하지 않고 브라우저에 머 무르려면 다음 HTML 코드를 사용하십시오.

<a href="javascript:this.location = 'index.php?page=1'">

4
이것은 당면한 질문이나 주제와 관련이없는 것 같습니다. 아마도 그것이 어떻게 관련되는지 설명 할 수 있습니까?
skeggse

6
매우 관련이 있습니다. 웹 앱을 전체 화면으로 가져온 후 항상 다음 문제입니다.
shrimpwagon 2013-08-13

저에게 다음 문제는 "전체 화면 모드에있는 페이지를 새로 고치려면 어떻게해야합니까?"입니다.
Nick

13
  1. 먼저 홈 화면에서 Safari 브라우저를 실행하고 전체 화면으로 보려는 웹 페이지로 이동합니다.

  2. 웹 페이지를 찾은 후 화면 상단의 화살표 아이콘을 탭합니다.

  3. 드롭 다운 메뉴에서 홈 화면에 추가 옵션을 탭합니다.

  4. 홈에 추가 창이 표시되어야합니다. iPad의 홈 화면에 제목으로 표시 될 설명을 사용자화할 수 있습니다. 완료되면 추가 버튼을 탭합니다.

  5. 이제 홈 화면에 새 아이콘이 나타납니다. 아이콘을 탭하면 전체 화면 모드로 웹 페이지가 열립니다.

참고 : iPad 홈 화면의 아이콘은 전체 화면 모드에서 북마크 된 페이지 만 엽니 다. 방문하는 다음 페이지에는 Safari 주소와 제목 표시 줄이 포함됩니다. 웹 페이지 또는 HTML5 프레젠테이션을 전체 화면 모드로 재생하는이 방법은 웹 페이지의 소스 코드에 다음 태그가 포함 된 경우 작동합니다.

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

타사 도구 (예 : iWeb SEO 도구 또는 원하는 다른 도구)를 사용하여 웹 페이지에이 태그를 추가 할 수 있습니다. 먼저 태그를 추가하고 페이지를 새로 고친 다음 홈 화면에 북마크를 추가해야합니다.


이것이 ispringsolutions.com/articles/… 에서 발견 된 지침의 직접 사본이라고 말할 수있었습니다. :-)
Jochem Schulenklopper

3
그리고 그들은 내 것을 복사했을 수도 있습니다. :)이 질문에 답변 한 날짜를보고 게시 날짜와 비교하십시오.
Code.Town 2014 년

건배! 이것은 당신의 종류입니다. :)
Code.Town 2014 년



0

이 스레드에 대한 대부분의 답변이 유지되지 않은 것 같습니다. iPad의 iOS Safari는 전체 화면을 지원합니다. 이제 하며 자바 스크립트를 사용하여 구현하기가 매우 쉽습니다.

다음 은 웹 앱에서 전체 화면 기능을 구현하는 방법에 대한 전체 기사 입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.