4
В моем мобильном шаблоне сайта используется jQuery Mobile CSS и на последних телефонах Android, он загружает только первые 20 пикселей страницы, а остальная страница отображается как черный экран.JQuery Mobile CSS превращает всю страницу в черный цвет Jelly Bean
Если я удаляю мобильную линию CSS jQuery, эффект «черного ящика» исчезает, поэтому я предполагаю, что проблема кроется там, но я не уверен, как это решить.
Я могу воссоздать эту проблему с помощью 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>
это нормально для меня в хром на XPERIA Z – TecHunter
при изменении размера высоты очень быстро в хроме вы иногда получаете черный фон Кто-нибудь еще уведомление? Если бы был только способ проверить его, прежде чем он исчезнет ... Редактирование: на моем Android, по-видимому, это также элемент клика. Настолько странно ... – casraf
Как я могу стрелять в него, я начинаю думать, что это проблема с самой разметкой HTML, например, может быть, jQuery сталкивается с ошибкой, анализируя ее в мобильном представлении? – ihateartists