JQ mobile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
<link rel="stylesheet" type="text/css" href="jq.mobile/jquery.mobile-1.4.5.min.css">
<!-- <script type="text/javascript" src="http://cdn.bootcss.com/device.js/0.2.5/device.js"></script> -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jq.mobile/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
.fenduan{
text-align: center;
}
.ui-controlgroup{
margin: 0;
width: 100% !important;
}
.ui-controlgroup-controls {
width: 100%;
}
.fenduan a{
width: 25% !important;
box-sizing:border-box;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" data-icon ="calendar">按钮</a>
<h1>这是jqm的骨架</h1>
<a href="#" data-icon ="arrow-u-r" data-iconpos="right">按钮</a>
<div class="fenduan">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" >选项</a>
<a href="#" data-role="button" >选项</a>
<a href="#" data-role="button" >选项</a>
<a href="#" data-role="button" >选项</a>
</div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="ture" data-filter ="true">
<li data-role="list-divider">港台歌手</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
<li data-role="list-divider">港台歌手</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
<li>
<img src="jq.mobile/1.jpg">
<h3>周杰伦</h3>
<p>啥地方开始的分解开连锁店就分手的垃圾分类介绍的垃圾房老师的看了就付款了</p>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
最近在使用jquery mobile开发HTML5 APP时，遇到在高版本Chrome上一直转圈，页面加载不出来的情况。
Chrome 43以下的版本，Firefox和Safari浏览器都没有这个问题。
查看控制台，报这么一个错误
Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with Url ....
由于习惯用Chrome进行开发调试，Firefox越来越不好用，Safari的Windows版版本也过老，所以决心解决这个兼容性问题。
在国外论坛上找到这么一段代码，加到jquery.mobile.js中后问题解决了。
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
