我正在构建一个Web应用程序,并且遇到了iOS 8的问题。请注意,这是特定于iOS 8的,因为它在以前的版本中可以正常工作。
我有一个页面可以上传直接从手机或平板电脑拍摄的图像。我使用以下链接调用相机应用程序:
<input type="file" accept="image/*" capture="camera" name="files[]">
相机应用程序将按预期打开,并且可以毫无问题地拍摄照片。但是,当相机应用程序关闭并返回到Web应用程序时,屏幕高度将减小一半以上。无法纠正关闭和重新启动应用程序的期望。
您可以在此处拍照后看到它的外观:
Screencast
看起来好像屏幕仍然是横向的。但是旋转设备只会使情况变得更糟。
我假设这是一个iOS 8错误,但想知道是否有人对如何纠正或解决此问题有任何想法。
最后一点,该问题仅在作为Web应用程序运行时发生。使用野生动物园时,它可以工作。
仅供引用-这是我正在使用的元标记:
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Customize home screen title. -->
<meta name="apple-mobile-web-app-title" content="DigiSite">
<!-- Disable phone number detection. -->
<meta name="format-detection" content="telephone=no">
<!-- Set viewport. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Startup images -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="http://img.digisite.us/splash.png?w=1536&h=2008&c=<br />
<b>Notice</b>: Undefined index: background in <b>/home5/digisite/public_html/mobile/mobileHeader.php</b> on line <b>22</b><br />
&n=lumentum"
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="http://img.digisite.us/splash.png?w=1496&h=2048&c=&n=lumentum"
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="http://img.digisite.us/splash.png?w=768&h=1004&c=&n=lumentum"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="http://img.digisite.us/splash.png?w=748&h=1024&c=&n=lumentum"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="http://img.digisite.us/splash.png?w=640&h=1096&c=&n=lumentum"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="http://img.digisite.us/splash.png?w=640&h=920&c=&n=lumentum"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
在此先谢谢您。
最佳答案
我在运行iOS8的iPad 2上看到了相同的问题。似乎与打开应用程序时的方向有关。如果我们以纵向(垂直)模式打开应用程序,然后切换至横向(水平),则效果很好。只有在横向打开应用程序时,视口(viewport)才会收缩。
我无法在iOS7上重现此问题。
拍摄照片之前:
拍摄照片后: