我的移动网站模板使用 jQuery Mobile CSS，在最新的 Android 手机上，它只加载页面的前 20 个像素左右，页面的其余部分显示为黑屏。
如果我删除 jquery mobile CSS 行，“黑框”效果就会消失，所以我猜问题就在那里，但我不确定如何解决这个问题。
我能够使用 Eclipse 重现问题，所以这里是屏幕截图: http://minus.com/l1wCMXzWbsHZ1
在我接触过的 iPhone、DroidX 和 2 台 Android 平板电脑上看起来不错，但在 Samsung 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>
最佳答案
正如 TecHunter 所建议的，我认为您应该在两者之间包含所有必要的 js 和 css 文件
<div data-role="page" id="page_id">
</div>
因为 jquery mobile 在执行网页时只加载页面 div。 也可以引用这个discussion .Hope it helps.Let us know if it raises any new issues.
关于javascript - JQuery Mobile CSS 在 Jelly Bean 中将整个页面变黑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17219653/