サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. ウェブサイトをアプ…
  • 最終更新日:
  • 投稿者: @signpostme

ウェブサイトをアプリっぽく表示させる「apple-mobile-web-app-capable」の使い方

Webサイトをアプリケーションっぽく表示させることができるmetaタグ、「apple-mobile-web-app-capable」に関して気になったことをまとめました。簡単に言えば、Safariではなく内部ブラウザで表示させることができる機能です。

「apple-mobile-web-app-capable」とは

app_modeApple製のデバイスでウェブサイトを開いたときに、通常ならSafariのようにアドレスバーやツールバーが表示されるのですが、「apple-mobile-web-app-capable」が登録されているウェブサイトはメニューバーやツールバーが表示されずアプリケーションっぽく表示されます。
 
なので、ウェブサイトをアプリっぽく見せたいときはこのmetaタグを入れてあげると簡単に実装できます。
 
 
 

「apple-mobile-web-app-capable」の使い方

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

 
上記のコードを、metaタグとして<head>内に記述します。
基本的にこの一文さえ追加してあれば、appleデバイスはウェブアプリとしてウェブサイトを表示してくれます。
 
 
 

「apple-mobile-web-app-capable」の注意点

「apple-mobile-web-app-capable」、アプリっぽく表示されてかっこいい!のですが、注意点もあります。
 
まず、ページ遷移を行う場合にSafariへ飛ばされてしまうことがあります。
それだったらアプリモードの意味がないので、JavaScriptで制御してあげる必要があるみたいです。
 
以下のサイトに詳しく掲載されていますので、ご確認ください。
 
スマホサイト:Webアプリモードで意外と書かれていない落とし穴
 
 
 

iPhone5への対応

実はこの「apple-mobile-web-app-capable」、iPhone5で閲覧するとiPhone4の画面サイズで表示されてしまいます。
原因は「viewport」にあるようで、以下のコードに書き換えてあげればうまく全画面で動作するようです。
 

<meta name="viewport" content="initial-scale=1">

 
「device-width」を記述しているとうまく動作しないみたいですね。
完全に「Appleデバイス専用アプリ」と割り切ったウェブサイトを作る場合はこのほうが良いでしょう。
 

新着記事を見る

TOP