スポンサーリンク

jQuery Mobile:ページタイトルが勝手に書き変えられてしまう

この記事は約3分で読めます。

操作画面

こんにちは、さち です。

先日、スクフェス用のLvMAXに必要な経験値を計算するサイト
を作ってみたという記事を書きました。

サイトを作成する際、 jQuery Mobile を使ったのですが
そのときに、<div data-role="header"> の内容が
ページタイトルに反映されてしまうことに困りました。

今回は、その解決法について書いていきます。

スポンサーリンク

<title>タグが上書きされてしまう

jQuery Mobile を使ってこんな感じに HTML を書きました。
<title> で「スクフェスLvMAX計算 - sachi-web」とページタイトルを指定
<div data-role="header"> でヘッダーとして「スクフェスLvMAX計算」と記述しました。
(data-role="header" はヘッダー領域を指定する jQuery Mobile 用の記述)
操作画面

ブラウザで確認するとページタイトルは「スクフェスLvMAX計算」。
<title> で「スクフェスLvMAX計算 - sachi-web」と指定したのに
<div data-role="header"> で記述した「スクフェスLvMAX計算」になっています。
操作画面

つまり、<title> で指定したページタイトルが
<div data-role="header"> の内容で上書きされてしまったのです。

これは jQuery Mobile の仕様。
「ヘッダーに表示するタイトル」と「ページタイトル」を別にするには
もう一つ別の記述が必要です。

解決方法

data-role="page" を記述した <div> に data-title 属性を追加。
そこに、改めて ページタイトル を記述します。
操作画面

ページタイトル をヘッダーのものと別にできました。
操作画面

この方法だと、
結局 <title> は作用してないから不要なのでは?とも思えますが
クローラ(検索エンジンのウェブページ収集ロボット)のために
残しておいた方がよいでしょう。

「contents」の中に「header」を入れる方法

「data-role="contents"」の中に「data-role="header"」を記述すると
ページタイトルが勝手に書き換えられないようです。

しかし、この方法では
contents の padding が header にも影響するため
ヘッダー部の周囲に微妙な隙間ができてしまいます。

また、現在の jQuery mobile では
「data-role="contents"」の代わりに「class="ui-content" role="main"」を用います。
つまり、記述方法自体が以前のバージョンと異なるのです。

以上の理由から
「data-role="contents"」の中に「data-role="header"」を記述するのは
控えた方が良いというのが私の個人的な見解です。

【参考サイト】

   → jQuery Mobileで基本的なページを定義するには? - Build Insider

コメント

タイトルとURLをコピーしました