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

我正在创建一个web应用程序,并遇到了iOS 8的一个问题。请注意,这是针对iOS 8的,因为它在以前的版本中可以正常工作。

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

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

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

在这里拍照之后你可以看到它的外观:Screencast

看起来好像屏幕保持横向。 但是旋转设备只会使情况变得更糟。

我认为这是一个iOS 8的错误,但不知道是否有人对如何纠正或解决该问题有任何想法。

最后一个注意事项是,该问题仅在作为Web应用程序运行时才会发生。 使用Safari浏览器时可以使用。

仅供参考 - 这里是我使用的meta标签:

        <!-- 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上看到了同样的问题。 这似乎与你打开你的应用程序的方向有关。如果我们以纵向(垂直)模式打开应用程序,然后切换到横向(水平),它可以正常工作。 只有当应用程序在横向打开时,视口才会缩小。

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

拍照之前: 照片捕获前的iPad

照片拍摄后: 捕获照片后的iPad


本,你绝对正确这是一个iOS 8的错误。 我无法确定如何以编程方式解决此问题。 如果有其他人有任何想法,请随时分享。 但有一种方法可以手动更正。

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

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

我希望这可以帮助别人。 希望苹果会纠正这一点。

谢谢Ben将缺陷提交给Apple!


我也有完全一样的问题。 我在8月6日在Apple bugtracker中打开了一个bugreport,但没有人关心: - /
这似乎与此有关

<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>
链接地址: http://www.djcxy.com/p/22943.html

上一篇: iOS 8 web app screen shrinks after loading camera app

下一篇: eazfuscator public members not obfuscated