スマートフォン用ウェブサイトのタブリスト作成に関して

スマートフォン用ウェブサイトの作成経験のある方に質問です。

  <!--タブパネル全体を定義-->
  <div data-role="header">
    <div id="tabs" data-role="tabs">
  <!--タブ-->
	<div data-role="navbar">
		<ul style="width: 100%;">
			<li><a href="#政治" class="ui-btn-active">政治</a></li>
			<li><a href="#経済">経済</a></li>
			<li><a href="#社会">社会</a></li>
			<li><a href="#スポーツ">スポーツ</a></li>
			<li><a href="#エンタメ">エンタメ</a></li>
		</ul>
	</div>

    <!--ニュース-->
	<?php foreach($shop_news as $news_category_code => $news_array): ?>
	<div id="<?php echo $news_array['name']; ?>" class="ui-body ui-body-a">
        <!--ジャンルの見出し-->
	    <h5 style="text-align: center;"><?php echo $news_array['name']; ?></h5>
                <!--ジャンル内でニュースの配列を作る-->
		        <?php if(isset($news_array['data']) && is_array($news_array['data'])) { foreach($news_array['data'] as $nkey => $news): ?>
		<div data-role="content">
		<ul data-role="listview">
                <!--ここにPHPでニュースの一覧を出力していきます-->
		</ul>
        </div>
                <?php endforeach; } ;?>
	</div>
	<?php endforeach; ?>
    </div>
  </div>

スマートフォン用にニュースリストをタブ状にして表示しようとしているのですが上手くいきません。

PCの主要ブラウザ上ではきちんとタブが機能するのですが、スマートフォン（iphone）で表示しようとした際に上記でいうところの「政治」から「エンタメ」までのニュースリストが一つのタブ内で出力されてしまいます（個々の変数の説明は割愛させていただきます）

この、PCとスマートフォンの挙動の違いはどこから来るものなのでしょうか。PCのブラウザであれば吸収されるがスマートフォンでは許容されない文法上の間違いがあるのか、あるいはそもそもがこの文法ではスマートフォン対応できないのか（PC環境がWindows8.1なのでデスクトップに関してはSafariの挙動を確認しておりません。）

よろしくお願いします。