Question

我正在建立一个网络应用程序并遇到iOS 8的问题。请注意这是特定于iOS 8，因为它在以前的版本中运行良好。

我有一个页面可以上传直接从手机或平板电脑拍摄的图像。我使用以下链接来调用相机应用程序：

<input type="file" accept="image/*" capture="camera" name="files[]">

相机应用程序按预期打开并拍摄照片没有问题。但是，当相机应用程序关闭并返回到Web应用程序时，屏幕高度会减少一半以上。没有办法纠正关闭和重新启动应用程序的期望。

您可以在此处拍摄照片后看到它的外观： Screencast

看起来好像屏幕仍然是横向的。然而，旋转设备只会使情况变得更糟。

我假设这是一个iOS 8错误，但想知道是否有人对如何纠正或解决问题有任何想法。

最后一点，只有在作为网络应用程序运行时才会出现此问题。使用safari时，它可以工作。

仅供参考 - 这是我正在使用的元标记：

        <!-- 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">

先谢谢你。

Answer 1

我在运行iOS8的iPad 2上看到同样的问题。它似乎与您打开应用程序的方向有关。如果我们以纵向（垂直）模式打开应用程序，然后切换到横向（水平）它工作正常。只有在横向打开应用程序时，视口才会缩小。

我还没能在iOS7上重现这个问题。

拍照前： iPad before photo capture

拍照后： iPad after photo capture

Answer 2

Ben，你绝对正确这是一个iOS 8的bug。我无法确定如何以编程方式解决它。如果其他人有任何想法，请随时分享。但有一种方法可以手动纠正。

问题似乎源于相机应用程序无法正确识别正确的位置。在我的iPhone上，即使保持横向位置，相机应用程序也始终以纵向模式打开。如果检测到这种情况，只需继续旋转设备，直到它自动校正位置。在纠正自己之前，我花了两次尝试。进入正确模式后，单击＆＃34;使用照片＆＃34;一切都很好。正如Ben所说，只要网络应用程序和相机应用程序处于相同的方向，那么一切都很好。如果它们不是您的网络应用程序，则端口将被搞砸。一旦发生这种情况，您唯一的办法是关闭应用程序并再试一次。另一个有趣的节点，它只发生在运行全屏应用程序时。如果像任何普通网站一样通过safari运行就没有问题。

我记录了这里的步骤，以确保我上面说的清楚。 http://screencast.com/t/1mwIur5Z8

我希望这有助于其他人。希望Apple能够纠正这一点。

感谢Ben将缺陷提交给Apple！

Answer 3

我有完全相同的问题。我在8月6日在Apple bugtracker中打开了一个bug报告，但没有人关心： - /
它似乎与

有关

<meta name="apple-mobile-web-app-status-bar-style" content="black">

如果您不使用此标签，则表示状态栏重叠，但拍照不会再调整视口大小。

修改
完整的例子：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="apple-touch-fullscreen" content="yes"> </head> <body><h1>Test</h1> <p>Capture a photo using camera</p> <input type="file" capture="camera" accept="image/*"> </body> </html>

Answer 4

Apple修复了iOS 8.3 beta 1中的这个错误

加载相机应用后，iOS 8网络应用程序屏幕缩小

4 个答案: