jQuery Mobileでdata-role=headerを使うときの注意点 -勝手にタイトルが変更される件-

　現象

1. headタグでtitleタグで文字列(A)を記述している
2. data-role=headerでhタグ内で何かしら文字列(B)を記述している

上記の際に1で指定している文字列(A)が反映されず、2で記述している文字列(B)がブラウザのタイトルに表示される

上記の現象が起きるのはjQuery Mobile側の仕様です。

　対応方法

以下のソースの場合、タイトルがさんぷるになってしまいます。

<div data-role="page">
 <div data-role="header">
   <h2>さんぷる</h2>
 </div>
</div>

以下のようにcontents内であれば、タイトルはheadタグのtitleタグが反映されます。

<div data-role="page">
 <div data-role="contents">
  <div data-role="header">
    <h2>さんぷる</h2>
  </div>
 </div>
</div>

ブラウザのタイトルが変更されているというのは、気づきづらいので注意ですね。