为什么此页面与移动浏览器不兼容？
[英]Why is this page incompatible with mobile browsers?
问题描述
I'm working on a hybrid app and created the following page: http://api.babelmatch.com:3000/learn (code pasted below in case this URL is offline in the future). 
我正在开发一个混合应用程序，并创建了以下页面： http ： //api.babelmatch.com ： 3000 / learn （代码粘贴在下面以防此URL将来离线）。 It loads fine when I test it in Chrome and Safari on my Mac. 当我在Mac上的Chrome和Safari中测试它时，它加载正常。 However, when I visit the same URL with an iPhone (Safari and Chrome) or Samsung Galaxy S2 (Chrome) the page does not load. 但是，当我使用iPhone（Safari和Chrome）或三星Galaxy S2（Chrome）访问相同的网址时，页面无法加载。 Instead the browser loads a blank white page. 而是浏览器加载空白页面。
Am I using some unsupported javascript or CSS that could be causing this problem? 我是否使用了一些可能导致此问题的不受支持的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>
2 个解决方案
解决方案1
4 已采纳 2013-02-19 00:56:00
Page has no doctype , which forces it into quirks mode in browsers. 页面没有doctype ，这会强制它在浏览器中进入怪癖模式。 jQuery does not support quirks mode and you will run into unexpected behavior jQuery不支持怪癖模式，你会遇到意想不到的行为
Run page through w3c validator service and get it clean 通过w3c验证器服务运行页面并使其保持干净
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fapi.babelmatch.com%3A3000%2Flearn http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fapi.babelmatch.com%3A3000%2Flearn
解决方案2
0 2013-02-19 00:58:25
height:100% is generally not supported very well by most browsers. height:100%大多数浏览器通常不支持height:100% 。 http://www.tutwow.com/htmlcss/quick-tip-css-100-height/ http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.