iPhone 5 iOS Webapp Not Fullscreen (не ширина = ширина устройства)

Я пытаюсь запустить мой сайт для полноэкранного просмотра на iPhone 5 в режиме webapp. Я знаю, что наличие ширины = ширина устройства в метатеге viewport может вызвать эту проблему, но я проверил бесчисленное количество раз и не могу найти ее в своем коде. Мой сайт выглядит так:iPhone 5 iOS Webapp Not Fullscreen (не ширина = ширина устройства)

<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar" lang="en-US"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 


<!--[if IE 8]> 
<html xmlns="http://www.w3.org/1999/xhtml" class="ie8 wp-toolbar" lang="en-US"> 
<![endif]--> 
<!--[if !(IE 8) ]><!--> 

<!--<![endif]--> 


<title>InfinityFusion ‹ The Lion Newspaper — WordPress</title> 
<script type="text/javascript"> 
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}}; 
var ajaxurl = '/wp-admin/admin-ajax.php', 
pagenow = 'toplevel_page_infinity-fusion', 
typenow = '', 
adminpage = 'toplevel_page_infinity-fusion', 
thousandsSeparator = ',', 
decimalPoint = '.', 
isRtl = 0; 
</script> 
<link rel="stylesheet" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/load-styles.php" type="text/css" media="all"> 
<link rel="stylesheet" id="open-sans-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/css" type="text/css" media="all"> 
<link rel="stylesheet" id="dashicons-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/dashicons.php" type="text/css" media="all"> 
<link rel="stylesheet" id="admin-bar-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/admin-bar.php" type="text/css" media="all"> 
<link rel="stylesheet" id="wp-admin-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/wp-admin.php" type="text/css" media="all"> 
<link rel="stylesheet" id="buttons-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/buttons.php" type="text/css" media="all"> 
<link rel="stylesheet" id="colors-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/infinityfusion.css" type="text/css" media="all"> 
<!--[if lte IE 7]> 
<link rel='stylesheet' id='ie-css' href='http://www.lion.ancientlegacy.co.uk/wp-admin/css/ie.min.css?ver=3.6-beta4' type='text/css' media='all' /> 
<![endif]--> 
<link rel="stylesheet" id="nv-bf-admin-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/admin.css" type="text/css" media="all"> 
<link rel="stylesheet" id="media-views-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/media-views.php" type="text/css" media="all"> 
<link rel="stylesheet" id="infusion-stickymenu-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/styles.css" type="text/css" media="all"> 
<link rel="stylesheet" id="wpl-posts-gmap-admin-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/wpl-posts-gmap-admin.css" type="text/css" media="all"> 
<link rel="stylesheet" id="infusion_mobeus_admin_css-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/infusion_mobeus-admin.css" type="text/css" media="all"> 
<link rel="stylesheet" id="redactor-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/redactor.css" type="text/css" media="all"> 
<link rel="stylesheet" id="infusion_mobeus-datepicker-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/datepicker.css" type="text/css" media="all"> 
<link rel="stylesheet" id="resp-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/resp.php" type="text/css" media="all"> 
<link rel="stylesheet" id="resp-admin-bar-css" href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/admin-bar(1).php" type="text/css" media="all"> 

<script type="text/javascript"> 
/* <![CDATA[ */ 
var userSettings = {"url":"\/","uid":"1","time":"1372616201"};var wpColorPickerL10n = {"clear":"Clear","defaultString":"Default","pick":"Select Color","current":"Current Color"};/* ]]> */ 
</script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/load-scripts.php"></script><style id="iris-css">.iris-picker{display:block;position:relative}.iris-picker,.iris-picker *{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input + .iris-picker{margin-top:4px}.iris-error{background-color:#ffafaf}.iris-border{border-radius:3px;border:1px solid #aaa;width:200px;background-color:#fff}.iris-picker-inner{position:absolute;top:0;right:0;left:0;bottom:0}.iris-border .iris-picker-inner{top:10px;right:10px;left:10px;bottom:10px}.iris-picker .iris-square-inner{position:absolute;left:0;right:0;top:0;bottom:0}.iris-picker .iris-square,.iris-picker .iris-slider,.iris-picker .iris-square-inner,.iris-picker .iris-palette{border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.4);height:100%;width:12.5%;float:left;margin-right:5%}.iris-picker .iris-square{width:76%;margin-right:10%;position:relative}.iris-picker .iris-square-inner{width:auto;margin:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-square-inner,.iris-ie-9 .iris-palette{box-shadow:none;border-radius:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-palette{outline:1px solid rgba(0,0,0,.1)}.iris-ie-lt9 .iris-square,.iris-ie-lt9 .iris-slider,.iris-ie-lt9 .iris-square-inner,.iris-ie-lt9 .iris-palette{outline:1px solid #aaa}.iris-ie-lt9 .iris-square .ui-slider-handle{outline:1px solid #aaa;background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"}.iris-ie-lt9 .iris-square .iris-square-handle{background:none;border:3px solid #fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}.iris-picker .iris-strip{margin-right:0;position:relative}.iris-picker .iris-strip .ui-slider-handle{position:absolute;background:none;right:-3px;left:-3px;border:4px solid #aaa;border-width:4px 3px;width:auto;height:6px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.2);opacity:.9;z-index:5;cursor:ns-resize}.iris-strip .ui-slider-handle:before{content:" ";position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px;border:2px solid #fff;border-radius:3px}.iris-picker .iris-slider-offset{position:absolute;top:11px;left:0;right:0;bottom:-3px}.iris-picker .iris-square-handle{background:transparent;border:5px solid #aaa;border-radius:50%;border-color:rgba(128,128,128,.5);box-shadow:none;width:12px;height:12px;position:absolute;left:-10px;top:-10px;cursor:move;opacity:1;z-index:10}.iris-picker .ui-state-focus .iris-square-handle{opacity:.8}.iris-picker .iris-square-handle:hover{border-color:#999}.iris-picker .iris-square-value:focus .iris-square-handle{box-shadow:0 0 2px rgba(0,0,0,.75);opacity:.8}.iris-picker .iris-square-handle:hover::after{border-color:#fff}.iris-picker .iris-square-handle::after{position:absolute;bottom:-4px;right:-4px;left:-4px;top:-4px;border:3px solid #f9f9f9;border-color:rgba(255,255,255,.8);border-radius:50%;content:" "}.iris-picker .iris-square-value{width:8px;height:8px;position:absolute}.iris-ie-lt9 .iris-square-value,.iris-mozilla .iris-square-value{width:1px;height:1px}.iris-palette-container{position:absolute;bottom:0;left:0;margin:0;padding:0}.iris-border .iris-palette-container{left:10px;bottom:10px}.iris-picker .iris-palette{margin:0;cursor:pointer}</style> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/admin.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/ajax-upload.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/datepicker.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/infusion_mobeus-admin.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/jquery.redactor.min.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/scripts.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/wpl-posts-gmap-admin.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/resp.js"></script> 
<script type="text/javascript" src="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/jquery.mobile.custom.min.js"></script> 
<style> 

.wp-menu-name { 

background:none !important; 
} 

#toplevel_page_infinity-fusion div { 

background-image:url(http://www.lion.ancientlegacy.co.uk/wp-content/plugins/infinityfusion/images/if_swirl.svg); 
background-repeat:no-repeat; 
background-position:center; 
background-size:20px 20px; 
} 

</style> 
<!--[if lt IE 8]> 
<style>#infusion_mobeus-admin-wrap .infusion_mobeus-content .infusion_mobeus-main-content .page{ 
display: block !important; 
}</style> 
<![endif]--> 
<!--[if gte IE 8]> 
<style>#infusion_mobeus-admin-wrap .infusion_mobeus-content .infusion_mobeus-main-content .page{ 
display: block !important; 
}</style> 
<![endif]--><style type="text/css" media="print">#wpadminbar { display:none; }</style> 
<link href="./InfinityFusion ‹ The Lion Newspaper — WordPress_files/colors-infusion.php" rel="stylesheet" type="text/css"> 
</head>

Как вы можете видеть, только мета-тег, связанные с веб-приложение является стандартным «яблочно-мобильно-WebApp-способных».

Тем не менее, всякий раз, когда я запускаю webapp, он запускает почтовый ящик, оставляя черные полосы сверху и снизу веб-страницы.

Что я пропустил?

источник

2013-06-30 Harri Bell-Thomas

Я также попытался сделать webapp для iOS, но у меня была такая же проблема! Я думаю, что это ошибка iOS. Это первый релиз для iPhone 5, и Apple не изменила размер экрана веб-приложения. И вы правы: вы никогда не используете ширина = устройство ширину, но вы имеете в виду: высота = устройство высота

Matthijs

источник

2013-06-30 19:27:17 matthijs2704

Кстати, ваш код полностью рабочий/OK, так что это не проблема ! – matthijs2704

Спасибо, что посмотрели все! Да, я тоже пробовал height = device-height, но это не сработало для меня. Мне просто интересно, вмешивается ли это в javascript или css (или это просто ошибка). Вы когда-нибудь слышали о том, что происходит в другом месте? Благодарю. –

Я спросил других разработчиков (приложений) и у них такая же проблема ... Даже простая веб-приложение без каких-либо javascript или css-ect. Имеет эту проблему. Так что это ошибка iOS. Я надеюсь, что это исправлено в iOS 7! – matthijs2704

iPhone 5 iOS Webapp Not Fullscreen (не ширина = ширина устройства)

ответ

Смежные вопросы