jQuery Mobileでヘッダー右端にほんの少し余白が表示されてしまう場合の対処

2013-06-172019-02-14jQuery,jQuery Mobile

Contents

問題

ヘッダー右端にほんの少し白い余白が表示されてしまう場合の対処について。以下のようなページを作成すると発生。

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="keywords" />
	<meta name="description" content="description" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>ヘッダー右端にスペースが空いてしまうケース</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<div data-role="page" id="pageId" data-fullscreen="true" data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="a">
	<div data-role="header">
	<h1>ヘッダー右端にスペースが空いてしまうケース</h1>
	<a href="settings.html" data-icon="gear" data-prefetch="true" data-dom-cache="true" data-transition="pop" class="ui-btn-right">設定</a>
	<div data-role="navbar">
	<ul>
	<li><a data-icon="home" href="index.html">ホーム</a></li>
	</ul>
	</div>
	</div>
	<div data-role="content">
	<p>ヘッダーの右端にほんの少し白い縦棒が見える</p>
	</div>
	<div data-role="footer">
	<h4>@2013 genzouw@gmail.com</h4>
	</div>
	</div>
	</body>
	</html>

view raw test.html hosted with

by GitHub

div[data-role=page] から以下の要素を除去

div[data-role=head] に以下の要素を追加

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="keywords" />
	<meta name="description" content="description" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>ヘッダー右端にスペースが空かないケース</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<div data-role="page" id="pageId" data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="a">
	<div data-role="header" data-position="fixed">
	<h1>ヘッダー右端にスペースが空かないケース</h1>
	<a href="settings.html" data-icon="gear" data-prefetch="true" data-dom-cache="true" data-transition="pop" class="ui-btn-right">設定</a>
	<div data-role="navbar">
	<ul>
	<li><a data-icon="home" href="index.html">ホーム</a></li>
	</ul>
	</div>
	</div>
	<div data-role="content">
	<p>大丈夫！</p>
	</div>
	<div data-role="footer">
	<h4>@2013 genzouw@gmail.com</h4>
	</div>
	</div>
	</body>
	</html>