JQuery Mobile CSS在Jelly Bean中将整个页面变成黑色

Question

我的移动网站模板使用jQuery Mobile CSS，在最新的android手机上，它只加载页面的前20个像素左右，页面的其余部分显示为黑屏。

如果我删除jquery移动CSS线，“黑匣子”效果消失，所以我猜测问题就在那里，但我不知道如何解决这个问题。

我能够使用Eclipse重新创建问题，所以这里有一个截图：http://minus.com/l1wCMXzWbsHZ1

它在iPhone，DroidX和我可以访问的2个Android平板电脑上看起来很好，但在三星Galaxy Note和更新的机器人上，他们得到了“黑匣子”。

你可以在这里看到它的演示：http://revivelab.com/demo_software/mobilebug/

这是我的源代码：

<?php
    // this function detects mobile tags in the ua string
    function detect_mobile(){
        if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT'])){
            return true;
        }else{
            return false;
        }
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head profile="http://www.w3.org/2000/08/w3c-synd/#">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="generator" content="Revive Media Services" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <title></title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/core.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="css/themes/dkmtwo.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
        <div id="container">
            <!-- start of home page -->
            <div data-role="page" id="one">
                <!-- home page header -->
                <div data-role="header" data-theme="a">
                    <div style="background-color:#fff;width:100%;height:125px;background-repeat:repeat-x;">
                        <div style="width:254px;margin-left:auto;margin-right:auto;">
                            <div style="width:254px;text-align:center;">
                                <img src="http://placehold.it/254x125" />
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div><!-- /header -->

                <!-- home page content -->
                <div data-role="content" data-theme="a">
                    <div style="background-color:#bec7ce; background-image: url('img/barbg.jpg'); background-repeat:repeat-x; padding:15px 0px 5px 0px;text-align:center;border-bottom:1px solid #666;">
                            <div style="text-align:center;">
                                <span style="width:140px;">
                                    <a href="tel:1234567890" class="phonelink" style="font-size:20px;text-decoration:none;">(123) 123-4567</a> 
                                </span>
                            </div>
                    </div>
                    <div style="width:100%;background-color:#102847;" >
                        <div style="width:320px;background-color:#fff;margin-left:auto;margin-right:auto;text-align:left;padding-top:10px;padding-bottom:10px;">
                            <h2 style="color:#23ae4c;text-align:center;">Headline!</h2>
                            <div style="float:right;">
                                <img src="http://placehold.it/100x115" />
                            </div>
                            <p class="content" style="line-height:24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <a href="http://forecastbudget.com/?view=nomobile" rel="external" data-role="button" data-theme="b">View Our Full Site</a>
                        </div>
                    </div>
                </div><!-- /content -->

                <div data-role="footer" data-theme="a" style="border:0;border-bottom:10px solid #414141;">
                    <div style="background-color:#bec7ce; background-image: url('img/barbg.jpg'); background-repeat:repeat-x; padding:10px;padding-top:20px;text-align:center;">
                        <a href="http://example.com/?view=nomobile" rel="external" data-theme="b" style="color:#3161a1;text-decoration:none;">example.com</a>
                    </div>
                </div><!-- /footer -->
            </div><!-- /home page -->


            <div class="clear"></div>

            <?php
                $mobile = detect_mobile();
                if($mobile === true){
                    echo '1';
                }else{
                    echo '2';
                }
            ?>
                    </div>
                </body>
            </html>

Answer 1

另一答案

Answer 2

另一答案

Answer 3

另一答案

Answer 4

另一答案