WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

iPhoneやiPadのフルスクリーンモードでリンクがSafariで開いてしまう現象の回避法

:iPhone•iPad•スマートフォン

iPhoneやiPadでホーム画面から開くように設定、
Webアプリのように使うページを作成し、
リンクをaタグで設定しクリックすると
アプリ内で遷移せずSafariが開いてしまいます。

iPad用にWebアプリ風に使うページを作成していたのですが、

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

上記メタタグを入れてWebアプリモード(フルスクリーンモード)にして、
ページを構築しましたが、
リンクをaタグで設定しクリックするとすぐSafariが開いてしまい、
ページ内で完結できませんでした。

普通にSafariで開いて使う分には問題ないのですが…

この現象を解決するため注意すべきことは

『リンクはJavaScript化するかページ内リンクで遷移させる構成にする』

ということです。

ここを押さえるだけで、
あとは何とかなります。
ここがわからなかったのでかなり長い間悩みました。

この記事はこちらのページを参考にさせていただきました。
ありがとうございます。
http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

単純なページ遷移の場合は、
上記ページ内のJQueryを使ったスクリプトを利用すれば問題ありませんが、
一緒にthickboxなどを使う場合はうまく動かない場合があるので、
その時はひとつひとつonClickイベントでリンクを設定した方が良さそうです。


【送料無料】iPhoneサイト制作ハンドブック

【送料無料】iPhoneサイト制作ハンドブック
価格:3,360円(税込、送料別)

pagetop