1
我正在研究混合应用程序并创建了以下页面：http://api.babelmatch.com:3000/learn（代码粘贴在下面，以防此URL在将来脱机）。当我在我的Mac上的Chrome和Safari中测试它时，它会正常加载。但是，当我通过iPhone（Safari和Chrome）或Samsung Galaxy S2（Chrome）访问相同的URL时，该页面无法加载。浏览器加载一个空白页面。为什么此页面与移动浏览器不兼容？
我使用一些不受支持的JavaScript或CSS可能会导致此问题吗？
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#content {
height: 100%;
width: 100%;
}
#row1 {
width: 100%;
height: 50%;
}
#row2 {
width: 100%;
height: 50%;
}
#q1 {
float:left;
background-color:red;
}
#q2 {
float:left;
background-color:yellow;
}
#q3 {
float:left;
background-color:blue;
}
#q4 {
float:left;
background-color:green;
}
#leftmargin {
height: 100%;
float: left;
background-color:orange;
}
#rightmargin {
height: 100%;
float: left;
background-color:purple;
}
#imageGrid {
height: 100%;
float: left;
}
.qImage {
width: 100%;
}
.circle {
border-radius: 1000px;
background-color: rgb(0, 162, 232);
z-index:100;
top: 50% left: 50% position: fixed;
}
</style>
</head>
<body>
<div id="content">
<div id="leftmargin"></div>
<div id="imageGrid">
<div id="row1">
<div id="q1">
<img id="q1Image" data-bind="attr:{src: q1ImagePath}" class="qImage" />
</div>
<div id="q2">
<img id="q2Image" data-bind="attr:{src: q2ImagePath}" class="qImage" />
</div>
</div>
<div id="row2">
<div id="q3">
<img id="q3Image" data-bind="attr:{src: q3ImagePath}" class="qImage" />
</div>
<div id="q4">
<img id="q1Image" data-bind="attr:{src: q4ImagePath}" class="qImage" />
</div>
</div>
<div class="circle"></div>
</div>
<div id="rightmargin"></div>
</div>
<script type="text/javascript">
//Set up the layout
var viewportWidth = document.documentElement.clientWidth,
viewportHeight = document.documentElement.clientHeight,
q1 = document.getElementById("q1"),
leftmargin = document.getElementById("leftmargin"),
rightmargin = document.getElementById("rightmargin"),
squareSize;
if (viewportHeight <= viewportWidth) {
//landscape
squareSize = viewportHeight/2;
leftmargin.style.width = (viewportWidth - squareSize - squareSize)/2;
rightmargin.style.width = leftmargin.style.width;
} else {
//portrait
squareSize = viewportWidth/2;
leftmargin.style.display = none;
rightmargin.style.display = none;
}
q1.style.height = squareSize;
q1.style.width = squareSize;
q2.style.height = squareSize;
q2.style.width = squareSize;
q3.style.height = squareSize;
q3.style.width = squareSize;
q4.style.height = squareSize;
q4.style.width = squareSize;
//style the circle play button
function upd() {
var h = $("body").height();
$(".circle").height(h/5);
$(".circle").width(h/5);
}
upd();
window.onresize = upd;
//UI control logic
//knockoutjs stuff
function GridViewModel() {
//data
var self = this;
self.q1ImagePath = ko.observable();
self.q2ImagePath = ko.observable();
self.q3ImagePath = ko.observable();
self.q4ImagePath = ko.observable();
// Load initial state from server, convert it to Grid instances, then populate self.tasks
$.getJSON("http://api.babelmatch.com:3000/image?language=Cantonese&count=4", function (allData) {
var baseUrl = "http://d22a3fhj26r1b.cloudfront.net/";
self.q1ImagePath(baseUrl + allData[0].imageFileName);
self.q2ImagePath(baseUrl + allData[1].imageFileName)
self.q3ImagePath(baseUrl + allData[2].imageFileName)
self.q4ImagePath(baseUrl + allData[3].imageFileName)
});
//operations
self.refreshImages = function() {
$.getJSON("http://api.babelmatch.com:3000/image?language=Cantonese&count=" + count, function (allData) {
var baseUrl = "http://d22a3fhj26r1b.cloudfront.net/";
self.q1ImagePath(baseUrl + allData[0].imageFileName);
self.q2ImagePath(baseUrl + allData[1].imageFileName)
self.q3ImagePath(baseUrl + allData[2].imageFileName)
self.q4ImagePath(baseUrl + allData[3].imageFileName)
});
}
}
ko.applyBindings(new GridViewModel());
</script>
</body>