我已经阅读了有关类似问题的stackoverflow，但只是关于页面转换。我的问题是它在桌面浏览器上运行良好，但在Chrome和Safari上试用我的iPhone有点闪烁。我的代码有什么问题，或者我可能没有做过什么？
<!DOCTYPE html>
<html>
<head>
<title>tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
var page = 0;
var isLoading = false;
function loadResults() {
isLoading = true;
$('#load-more').html('Loading...');
$.get('<?php echo substr($_SERVER['REQUEST_URI'], 0, strrpos($_SERVER['REQUEST_URI'], '/')); ?>/pagedResults.php?page=' + page, function (data) {
if ($.trim(data) != '') {
$('.ui-li-twoBubble').append(data).listview('refresh');
$('#load-more').html('Load more');
} else {
$('#load-more').html('No more to load').off('click');
}
isLoading = false;
})
.fail(function () {
isLoading = false;
});
}
$(document).on('ready', function () {
loadResults();
$('#load-more').on('click', function () {
if (!isLoading) {
page++;
loadResults();
}
});
$("[data-role=header]").fixedtoolbar({ tapToggle: false });
});
$(document).on('mobileinit', function () {
$.mobile.defaultPageTransition = 'none';
});
</script>
</head>
<body>
<!-- /header -->
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
<a href="test.php" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span><span class="ui-btn-text">Back</span></span></a>
<a id="bars-button" data-icon="bars" class="ui-btn-right" href="#navpanel">Menu</a>
</div>
<div data-role="panel" id="navpanel" data-theme="a"
data-display="push" data-position="right">
<ul data-role="listview">
<li data-role="list-divider">Lotto App</li>
<li><a href="generate.php"><img src="images/gf.png" alt="France" class="ui-li-icon">Generate</a></li>
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li>
<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway</a></li>
<li><a href="#" data-rel="close"><img src="images/us.png" alt="United States" class="ui-li-icon">Close</a></li>
</ul>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" data-theme="c" class="ui-li-twoBubble">
</ul>
</div>
<!-- /footer -->
<div data-role="footer" data-position="fixed" class="nav-glyphish-example">
<div id="advert" >
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4332232705105580";
/* lottoApp */
google_ad_slot = "8809828798";
google_ad_width = 320;
google_ad_height = 50;
//--><!--</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<span id="load-more">Load more</span>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>