Android 웹 애플리케이션 구성
iPhone 웹 앱에는 웹 페이지를 책갈피로 홈 화면에 표시 할 때 웹 페이지가 작동하는 방식을 구성하는 데 사용할 수 있는 네 가지 구성 기능 (HTML5 응용 프로그램 캐시 제외)이 있습니다.
- 홈 페이지 아이콘을 수 있습니다.
- 웹 페이지가로드되는 동안 표시되는 시작 이미지를 있습니다.
- 브라우저 UI를 숨길 수 있습니다.
- 상태 표시 줄 색상을 설명 수 있습니다.
네 가지 기능은 다음과 같이 <head>에 태그를 추가하여 작동합니다.
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
당연히 다음 "apple-"특정 태그는 Android에서 아무 작업도 수행하지 않습니다. 그러나 동등한 것이 할 수있는 방법이 있습니까? [최소한 사용자가 Android 홈 화면 (예 : Android 2.0)에 내 웹 페이지를 추가하고 예쁜 고해상도 아이콘을 있기 때문에 바랍니다.]
답변이 변경된 주문입니다. 최신 Android의 Chrome에는 자체 메타 태그가 있습니다. 홈 화면에 추가하고 홈 화면에서 시작하십시오. 일반적인 북마크 충분하지. Chrome은 현재 몇 가지 사과 지시문을 사용하지만 맨 아래에있는 세 가지 Android 마법입니다.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">
홈 화면에서 북마크에 대한 바로 가기를 만들면 Android는있는 경우 apple-touch-icon-precomposed(하지만 아님 apple-touch-icon)를 고해상도 아이콘으로 사용합니다.
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
나머지 기능에있는 웹 사이트의 래퍼 역할을하는 Android 앱을 게시하지 않고 현재이 작업을 수행 할 수 있습니다.
이 독자들에게 흥미로울 수 있습니다.
http://code.google.com/p/android/issues/detail?id=7657
2.1-update1, Droid 및 다른 2. * OS 휴대폰에서 홈 화면에 책갈피를 추가 할 때 홈 화면은 링크 rel = "apple-touch-icon"또는 apple-touch 인 경우에만 사용자 지정 아이콘을 표시합니다. -icon-precomposed에는 전체 URL 경로가 있습니다.
나는 삼성 갤럭시 S1에서 위의 것을 시도했습니다.
저에게 효과가 없었습니다 ...하지만 효과가 사라지는 북마크를 만든 다음 해당 북마크를 내 집의 바로 가기로 추가하는 것이 었습니다. 이렇게하면 올바른 아이콘이 사용되었습니다.
가능한 최상의 결과를 위해 사용할 수있는 다양한 메타 요소가 있습니다.
먼저 앱의 뷰포트를 다음과 같이 설정해야합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">화면이 더 큰 기기 (예 : iPhone 5)를 약간의 약간의 해킹이 있습니다.
<meta name="viewport" content="initial-scale=1.0">다른 메타 아래에두면 모든 마법을 수행합니다.
이제 기본 사항이 있으므로 모바일 브라우저에게 웹 사이트가 앱인 것처럼 "읽도록"지시 할 것입니다. 두 가지 주요 메타 요소가 있습니다.
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">이렇게하면 웹 사이트가 전체 화면 모드로 열리고 기본 상태 표시 줄의 스타일이 지정됩니다.
우리는 "동작하는"메타 요소로 끝났으니 이제 아이콘부터 시작하겠습니다. 아이콘과 코드 라인의 양은 전적으로 귀하에게 달려 있습니다. 시작 이미지의 경우 각 해상도에 대해 하나의 아이콘을 만들고 싶었습니다. 그래서 "로더"가 모든 장치 (주로 Apple 장치)에서 동일하게 작동하도록했습니다. 내가 한 방법은 다음과 가변적이다.
<!--iPhone 3GS, 2011 iPod Touch--> <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)"> <!--iPhone 4, 4S and 2011 iPod Touch--> <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)"> <!--iPhone 5 and 2012 iPod Touch--> <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)"> <!--iPad landscape--> <link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"> <!--iPad Portrait--> <link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">참고 : PNG 형식은 모든 크기를 준수해야합니다. 구분 작동하지 않습니다.
완료 비용 앱 아이콘도 필요합니다. 이 아이콘은 장치 메뉴에 표시됩니다. 내가 한 방법은 다음과 가변적이다.
<!--iPhone 3GS, 2011 iPod Touch and older Android devices--> <link rel="apple-touch-icon" href="../images/mobile-icon-57.png"> <!--1st generation iPad, iPad 2 and iPad mini--> <link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png"> <!--iPhone 4, 4S, 5 and 2012 iPod Touch--> <link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png"> <!--iPad 3rd and 4th generation--> <link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">참고 : 아이콘이 iOS 반사 광택으로 표시되지 않도록 "미리 구성됨"을 사용할 수도 있습니다. rel을 다음과 같이 정의하는 곳에 다음 단어를 추가하십시오.
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
말했듯이 이것은 Apple 장치에서 더 잘 작동합니다. Android 앱 아이콘은 Android 기기에서 작동합니다.
참고 URL : https://stackoverflow.com/questions/1951381/configuring-android-web-applications
'ProgramingTip' 카테고리의 다른 글
| 취소하지 않는 것이 나쁜가요? (0) | 2020.11.21 |
|---|---|
| 열 너비가 고정 된 LaTeX 테이블의 셀 내용을 중앙에 배치하는 방법은 무엇입니까? (0) | 2020.11.21 |
| C ++에서 배열 타임에 프로그래밍 방식으로 정적 배열 만들기 (0) | 2020.11.21 |
| 콘솔 (Ctrl-C)에서 종료 될 때 PyQt 애플리케이션을 종료하는 올바른 방법은 무엇입니까? (0) | 2020.11.21 |
| 입력 유형 = "텍스트"요소 HTML / CSS 내부 텍스트 기 (0) | 2020.11.21 |