JQueryUI.js を PHP コードに含めると問題が発生します。次の CSS を適用するモバイル サイトがあります。
.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
border: 0 none;
display: none;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 100%;
}
JQueryUI.jsを含めると。私のテンプレートは
<head>
<link rel="stylesheet" href="/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="/css/mobile.css" />
<script src="/js/jquery.js"></script>
<script src="/js/jquery.mobile-1.3.1.min.js"></script>
<link rel="icon" type="image/png" href="/images/favicon.ico">
</head>
<body>
<div data-role="page" data-theme="c" id="mpage">
<div data-role="header" data-theme="c" id="mheader">
<?php echo $this->partial('mheader.phtml'); ?>
</div>
<div data-role="content" data-theme="c" id="mcontent">
<?php echo $this->layout()->content ?>
</div>
<br/><br/>
<div data-role="footer" data-theme="c" id="mfooter">
<?php echo $this->partial('mfooter.phtml'); ?>
</div>
</div>
</body>
firebug でスタイルを確認すると、次の div が消えているのがわかります
<div id="mpage" data-theme="c" data-role="page" data-url="mpage">