웹앱용 meta tag

웹앱 커스터마이징

화면에 대한 관심도가 갈수록 높아지고 있다.

오로지 View 만을 위한 Program Language가 계속해서 출시되고 있는 것만 보아도 느껴진다.

스타트업이나, 떠오르는 기업의 프론트앤드 개발자들은 덕분에 바빠지고(?)있다.

보통 중소기업 및 중견기업은 옛날 소스를 대부분 유지보수 중이다.

이는 좋게 말하면 '안정화', 나쁘게 말하면 '필요성을 못느낌' 또는 '귀찮음' 이다.

특히 백엔드 분야에서는 추가개발 요청이 오면 옛날 소스를 분석하고, JDK 또는 SDK 등 언어의 버전을 맞추고, 해당 버전에 맞는 옛날 방식의 소스로 코딩을 진행해야하고... 이러한 불필요한 과정들이 참 많다.

그런데, 프론트엔드 분야에서는 이 과정이 조금 쉽다.

대다수가 HTML5로 개발되어 있기 때문에 태그 몇개로 엄청난 변화를 꾀할 수 있다.

내 기기에 맞게

바로 viewport이다.

이를 이용하면, 사용중인 device에 맞게 width와 height이 확대된다.

기존에 사용중인 웹의 <head>태그 안에 아래 meta태그만 추가하면 사용중인 device에 맞게 출력된다.

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">

웹앱 추가기능 부가기능 (홈화면에 추가)

홈 화면에 추가 기능은 IOS 와 Android 에 따라 설정이 다르다.

하지만 우리에겐 많이 써도 부담없는 meta 태그가 있다.

자주 쓰이는 meta태그들과 link 만 담아보았다.

<meta name="application-name" content="홈화면에 추가 Title Android"/>
<meta name="apple-mobile-web-app-title" content="홈화면에 추가 Title IOS"/>
<meta name="mobile-web-app-capable" content="yes"/> <!-- 풀 스크린 모드설정 Android -->
<meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 풀 스크린 모드설정 IOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 상태바 표시 IOS -->


<link rel="shortcut icon" href="/favicon.ico"/>	<!-- 탭 이미지 favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="/logo192.png"><!-- 홈화면에 추가 icon Android -->
<link rel="apple-touch-icon" href="/logo192.png"/> <!-- 홈화면에 추가 icon IOS -->

<link rel="apple-touch-startup-image" href="/logo114.png"/> <!-- Splash icon IOS -->

<!-- Splash 이미지는 자주 사용하지는 않아서.. 별도로 뺏다 -->
<!-- STARTUP IMAGES - IOS만 해당 -->

    <!-- iPad retina portrait startup image -->
    <link href="/splash-1536x2008.jpg"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 2)
                 and (orientation: portrait)"
          rel="apple-touch-startup-image">

    <!-- iPad retina landscape startup image -->
    <link href="/splash-1496x2048.jpg"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 2)
                 and (orientation: landscape)"
          rel="apple-touch-startup-image">

    <!-- iPad non-retina portrait startup image -->
    <link href="/splash-768x1004.jpg"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 1)
                 and (orientation: portrait)"
          rel="apple-touch-startup-image">

    <!-- iPad non-retina landscape startup image -->
    <link href="/splash-748x1024.jpg"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 1)
                 and (orientation: landscape)"
          rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus portrait startup image -->
    <link href="/splash-1242x2148.jpg"
          media="(device-width: 414px) and (device-height: 736px)
                 and (-webkit-device-pixel-ratio: 3)
                 and (orientation: portrait)"
          rel="apple-touch-startup-image">

    <!-- iPhone 6 Plus landscape startup image -->
    <link href="/splash-1182x2208.jpg"
          media="(device-width: 414px) and (device-height: 736px)
                 and (-webkit-device-pixel-ratio: 3)
                 and (orientation: landscape)"
          rel="apple-touch-startup-image">

    <!-- iPhone 6 startup image -->
    <link href="/splash-750x1294.jpg"
          media="(device-width: 375px) and (device-height: 667px)
                 and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

    <!-- iPhone 5 startup image -->
    <link href="/splash-640x1096.jpg"
          media="(device-width: 320px) and (device-height: 568px)
                 and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

    <!-- iPhone < 5 retina startup image -->
    <link href="/splash-640x920.jpg"
          media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image">

    <!-- iPhone < 5 non-retina startup image -->
    <link href="/splash-320x460.jpg"
          media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 1)"
          rel="apple-touch-startup-image">

저작자표시 비영리 동일조건

웹앱 커스터마이징

내 기기에 맞게

웹앱 추가기능 부가기능 (홈화면에 추가)

검색 태그

티스토리툴바