Question

我正在开发一个混合应用并创建了以下页面：http://api.babelmatch.com:3000/learn（以下粘贴代码，以防此URL今后脱机）。当我在Mac上的Chrome和Safari中测试它时，它加载正常。但是，当我使用iPhone（Safari和Chrome）或三星Galaxy S2（Chrome）访问相同的网址时，页面无法加载。相反，浏览器会加载一个空白页面。

我是否使用了一些可能导致此问题的不受支持的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>

Answer 1

页面没有doctype，这会强制它在浏览器中进入怪癖模式。 jQuery不支持怪癖模式，你会遇到意想不到的行为

通过w3c验证器服务运行页面并将其清理干净

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fapi.babelmatch.com%3A3000%2Flearn

Answer 2

大多数浏览器通常不支持

height:100%。 http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

为什么此页面与移动浏览器不兼容？

2 个答案: