4

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

如果我删除 jquery mobile 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>
4

5 回答 5

3

正如 TecHunter 建议的那样，我认为您应该在两者之间包含所有必要的 js 和 css 文件

<div data-role="page" id="page_id">


</div>

由于 jquery mobile 在执行网页时仅加载页面 div。您也可以参考这个讨论。希望它有所帮助。如果它提出任何新问题，请告诉我们。

于 2013-06-25T09:51:29.860 回答
2

尝试在您的末尾移动您的脚本body：

 <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>
</body>
于 2013-06-24T16:03:46.117 回答
2

看起来底部的 PHP 实际上是罪魁祸首。删除此修复它：

        <?php
            $mobile = detect_mobile();
            if($mobile === true){
                echo '1';
            }else{
                echo '2';
            }
        ?>
于 2013-06-25T15:56:40.883 回答
2

将前三行替换为以下内容

<!DOCTYPE html>
<html>
<head>
于 2013-06-25T06:15:59.727 回答
1

其他尝试：您可以尝试为脚本指定类型：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

和/或为您的文档提供另一种文档类型HTML5，正如@Venkat 建议的那样或XHTML Transitional如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我不知道这是否可以解决您的问题，但最好使用经过适当验证的标记。

于 2013-06-25T06:41:49.183 回答