我试图让我的网站在 iPhone 5 上以 webapp 模式全屏运行。我知道在视口(viewport)元标记中有 width=device-width 可能会导致这个问题，但我已经检查了无数次，在我的代码中找不到它。我的网站看起来像这样；
<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 相关的唯一元标记是标准的“apple-mobile-web-app-capable”。
尽管如此，每当我启动 web 应用程序时，它都会启动 letterboxed，在网页的顶部和底部留下黑条。
我错过了什么？
最佳答案
我也尝试为 iOS 制作一个 webapp，但我遇到了同样的问题!我认为这是一个iOS错误。这是 iPhone 5 的第一个版本，Apple 没有更改 Web 应用程序框架的屏幕大小。你是对的:你从不使用 width=device-width，但你的意思是:height=device-height
马蒂斯
关于ios - iPhone 5 iOS Webapp 不是全屏(不是宽度=设备宽度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17393678/