All geek questions in one place

JQuery Mobile CSS turns the entire page into black in jelly Bean

My mobile site template uses jQuery Mobile CSS and on the latest Android phones, it only loads the first 20 pixels of the page, and the rest of the page is displayed as a black screen.

If I delete the jQuery mobile CSS line, the black box effect disappears, so I assume the problem lies there, but I'm not sure how to resolve it.

I can recreate the problem using Eclipse, so here is a screenshot: http://minus.com/l1wCMXzWbsHZ1

It looks great on the iPhone, DroidX, and 2 Android tablets that I had access to, but on the Samsung Galaxy Note and new droids they get a black box.

Here you can see the demo: 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>
+4
source share
5 answers

It seems that PHP was actually the culprit. Uninstall this fix:

  <?php $mobile = detect_mobile(); if($mobile === true){ echo '1'; }else{ echo '2'; } ?>
+2
source

As TecHunter said, I think you should include all the necessary js css files between

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

Since jquery mobile only loads div pages when executing web pages. You can also refer to this discussion . Hope this helps. Let us know if there are any new problems.

+3
source

Try moving your scripts at the end of your 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>
+2
source

Replace the first three lines with the following

 <!DOCTYPE html> <html> <head>
+2
source

Another attempt: you can try creating a type for your scripts:

 <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>

And / or assigning your document a different type of HTML5 document, as @Venkat or XHTML Transitional suggests:

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

I do not know if this will solve your problem, but it is always better to have a proper markup check.

+1
source

Source: https://habr.com/ru/post/1487342/

More articles:


All Articles