我有一个适合webapp(主屏幕)高度的问题.我使用以下元标记:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
我的问题是,屏幕顶部和底部有黑条.首先我想,由于屏幕较高,这是iPhone 5的一个错误.但是今天我看到了一个适合iphone5屏幕的webapp(apps.ft.com/).
任何想法,我做错了什么？
这里是我完全相关的元标记
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">
编辑:经过一个小时的搜索,我找到了解决方案如何强制浏览器适应全高度.当我定义一个启动图像(apple-touch-startup-image)时,我的iphone只适合高度.这是我的代码:
<!-- iPhone 4 (Retina) -->
<link href="img/icons/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="img/icons/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
我有一个Web应用程序设置为针对Mobile Safari的主屏幕应用程序.我定义了一系列启动图像,它们可以在运行iOS 8的多个iPad和iPhone设备上完美运行.当我在运行iOS 9的设备上设置相同的应用程序时,图像不会出现.
我已经验证了图像在服务器上.我已经在iOS 8和iOS 9设备的主屏幕上删除了应用程序,强制退出Safari,清除缓存,然后将应用程序重新添加到主屏幕.这是作为一个完整性检查完成的,以确保不涉及缓存问题.
我已经回顾了适用于iOS 8的常用方法,看看是否存在可能仍然有效的变体,例如在以下位置找到的变体:
所有这些都让我回到了同样的问题.在运行iOS 8时,我会看到启动图像,但在运行iOS 9时它们不会出现.
还有其他人看到这个问题吗？如果使用运行iOS 9的主屏应用程序为您显示启动图像,您使用的<link>标签是什么？
以下是我目前运行良好的iOS 8运行配置:
<!-- STARTUP IMAGES -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="~/assets/images/startup/startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="~/assets/images/startup/startup-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="~/assets/images/startup/startup-768x1004.png" media="(device-width: …我们在www.tekiki.com上为移动HTML5应用程序使用jQuery Mobile 1.3.2 .(从iPhone上查看,或从桌面上查看www.tekiki.com/dandy/dandy.)
加载后,JQM会在加载屏幕和应用程序的第一页之间显示一个白页.JQM中是否有设置来压制加载屏幕？我们发现的最接近的是$.mobile.loading(),但这仅适用于加载文本.我们希望整个白屏消失,这意味着应用程序应该直接从加载屏幕转到第一页.
我一直试图让我的网络应用程序出现在iOS设备上.当我将应用程序添加到我的主屏幕后加载应用程序时,我得到一个白色屏幕,没有任何加载.但是,如果我将元标记移动到我的图标和启动画面下方,应用程序将加载正常,但启动画面将无法加载.无论代码在何处,图标都适用于所有设备.
以下是我目前的代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--iOS ICONS-->
<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-120x120.png"
rel="apple-touch-icon"
sizes="120x120" />
<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-152x152.png"
rel="apple-touch-icon"
sizes="152x152" />
<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-180x180.png"
rel="apple-touch-icon"
sizes="180x180" />
<!--iOS SPLASH SCREENS-->
<!--iPhone 5-->
<link rel="apple-touch-startup-image"
href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-portrait@2x~iphone5.jpg"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"/>
<!--iPad, Landscape-->
<link rel="apple-touch-startup-image"
href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape~ipad.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"/>
<!--iPad retina, Landscape-->
<link rel="apple-touch-startup-image"
href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape@2x~ipad.png"
media="(device-width: 768px) and (device-height: …我试过了
<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">
但它没有用.苹果的界面guildline尚未针对iphone5进行更新.
有人知道吗？谢谢!