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

Posted 2023-03-12

技术标签:

【中文标题】为啥此页面与移动浏览器不兼容？【英文标题】：Why is this page incompatible with mobile browsers?为什么此页面与移动浏览器不兼容？ 【发布时间】：2013-02-19 00:45:20 【问题描述】：

我正在开发一个混合应用程序并创建了以下页面：http://api.babelmatch.com:3000/learn（下面粘贴代码以防此 URL 将来离线）。当我在我的 Mac 上的 Chrome 和 Safari 中测试它时，它加载得很好。但是，当我使用 iPhone（Safari 和 Chrome）或三星 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>

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

【参考方案2】：

height:100% 通常不被大多数浏览器很好地支持。 http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

【讨论】：

以上是关于为啥此页面与移动浏览器不兼容？的主要内容，如果未能解决你的问题，请参考以下文章

移动端的兼容性

移动端布局