iOS 8 Web 应用程序屏幕在加载相机应用程序后缩小答案

【问题标题】：iOS 8 web app screen shrinks after loading camera appiOS 8 Web 应用程序屏幕在加载相机应用程序后缩小
【发布时间】：2014-11-19 10:12:03
【问题描述】：

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

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

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

相机应用程序按预期打开，并且可以毫无问题地拍照。但是，当相机应用程序关闭并返回到 Web 应用程序时，屏幕高度会减少一半以上。无法更正期望关闭和重新启动应用程序。

您可以在这里看到拍照后的样子： Screencast

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

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

最后一点，该问题仅在作为 Web 应用程序运行时出现。使用 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">

先谢谢你了。

【问题讨论】：

在苹果错误报告器上打开了一个问题。问题 ID：19599472
我在 ios8 上也看到过这个问题。

标签： ios iphone web-applications web camera

【解决方案1】：

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

【讨论】：

【解决方案2】：

我也有同样的问题。我在 8 月 6 日在 Apple bugtracker 中打开了一份错误报告，但没有人关心：-/
好像有关系

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

【讨论】：

我尝试删除此元标记，但我个人没有看到任何更改。看起来 iOS 8 比以前的版本更糟糕。感谢您的评论，也许它会帮助某人。还要感谢您打开另一个错误报告。也许如果有足够多的人提出这个问题，它就会得到解决。
如果您将页面添加到主屏幕，您可能需要在代码更改后重新添加。我在答案中添加了更多代码。它可以在装有 iOS 8.0.2 的 iPad 3 上运行，而无需在拍照后调整屏幕大小

【解决方案3】：

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

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

我在此处记录了这些步骤，以确保我上面所说的内容清晰。 http://screencast.com/t/1mwIur5Z8.

我希望这对其他人有所帮助。希望苹果能纠正这个问题。

感谢 Ben 将缺陷提交给 Apple！

【讨论】：

【解决方案4】：

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

我无法在 iOS7 上重现此问题。

拍照前：

拍照后：

【讨论】：

有趣，你知道发生这种情况时是否有办法刷新视口？确实没有办法阻止用户表单以特定方向启动相机应用程序。
不确定大卫。我试图在没有运气的情况下强制重新加载视口。我向 Apple #18444627 提交了一个错误，如果你有一个 Apple 开发帐户，我想你可以在 bugreport.apple.com 上查看它。
谢谢本！！！以下是使用 Web 应用程序时手动更正的步骤。我希望这可以帮助别人。 ScreenCast of Manual Fix