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:
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: /
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|doo|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" ".dtd">
<html xmlns="" xml:lang="en-US" lang="en-US">
<head profile="">
<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=".3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/themes/dkmtwo.css" />
<script src=".7.1.min.js"></script>
<script src=".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="" />
</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="" />
</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="/?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="/?view=nomobile" rel="external" data-theme="b" style="color:#3161a1;text-decoration:none;">example</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>
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./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./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|doo|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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en-US" lang="en-US">
<head profile="http://www.w3/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./mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/themes/dkmtwo.css" />
<script src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script src="http://code.jquery./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./?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./?view=nomobile" rel="external" data-theme="b" style="color:#3161a1;text-decoration:none;">example.</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>
- it's okay for me in chrome on XPeria Z – TecHunter Commented Jun 24, 2013 at 16:00
- Does anyone else notice when resizing the height really fast in chrome you sometimes get a black background? If only there was a way to inspect it before it disappears... Edit: on my Android apparently it's also a clickthrough element. So weird... – casraf Commented Jun 24, 2013 at 16:39
- As I trouble shoot it, I'm starting to think it's a problem with the HTML markup itself, like maybe jQuery is encountering an error parsing it into the mobile view? – ihateartists Commented Jun 24, 2013 at 17:09
- Checkout my answer and let me know your feedback! – Venkat.R Commented Jun 25, 2013 at 6:16
5 Answers
Reset to default 3 +25As 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.
Try moving your scripts at the end of your body :
<script src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script src="http://code.jquery./mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</body>
Replace the first three lines with the following
<!DOCTYPE html>
<html>
<head>
It seems the PHP at the bottom was actually the culprit. Removing this fixes it:
<?php
$mobile = detect_mobile();
if($mobile === true){
echo '1';
}else{
echo '2';
}
?>
Other try: you could try giving a type to your scripts:
<script type="text/javascript" src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery./mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
And/or giving another doctype to your document, HTML5, as @Venkat suggests or XHTML Transitional as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I don't know if this will solve for sure your problem, but always is better have properly validated markup.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744398884a4572285.html
评论列表（0条）