Menu
My mobile site template uses the jQuery Mobile CSS and on the latest Android Phones, it only loads the first 20 pixels or so of the page and the rest of the page appears as a black screen.
If I remove the jquery mobile CSS line, the 'black box' effect goes away so I am guessing the problem lies there but I'm not sure how to resolve this.
I am able to recreate the problem using Eclipse, so here is a screenshot: http://minus.com/l1wCMXzWbsHZ1
It looks fine on an iPhone, the DroidX, and 2 Android Tablets I have had access to, but on the Samsung Galaxy Note and newer droids they get the 'black box.'
You can see a demo of it here: http://revivelab.com/demo_software/mobilebug/
Here is my source code:
<?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>
833
As TecHunter has suggested I think you should include all of your necessary js an css files in between
<div data-role="page" id="page_id">
</div>
As jquery mobile loads only pages div while executing the web pages. You can also refer this discussion.Hope it helps.Let us know if it raises any new issues.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
