私のモバイル サイト テンプレートは 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>