Reputation: 2851

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). It loads fine when I test it in Chrome and Safari on my Mac. However, when I visit the same URL with an iPhone (Safari and Chrome) or Samsung Galaxy S2 (Chrome) the page does not load. Instead the browser loads a blank white page.

Am I using some unsupported javascript or CSS that could be causing this problem?

<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>

Upvotes: 1