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

我正在构建一个网络应用程序并遇到了iOS 8的问题。请注意，这是特定于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">

谢谢你在先进。

来源

2014-09-24 David Rodriguez

打开苹果的bug记者的问题。问题ID：19599472 – 2015-01-26 17:41:08

我在ios8上看到过这个问题。 – 2015-03-30 14:45:57

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

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

照片拍摄前： iPad before photo capture

照片拍摄后： iPad after photo capture

来源

2014-09-24 19:51:03

有趣的是，你知道这种情况发生时是否有办法刷新视口？真的没有办法阻止用户以特定的方向启动相机应用程序。 – 2014-09-24 19:57:40

不确定David。我试图强制重新加载视口，但没有运气。我向苹果提交了一个bug＃18444627如果你有一个苹果dev的帐户，我想你可以在https://bugreport.apple.com查看它。 – 2014-09-24 20:08:52

谢谢Ben！以下是使用Web应用程序时手动更正的步骤。我希望这可以帮助别人。 [ScreenCast的手动修复]（http://screencast.com/t/1mwIur5Z8） – 2014-09-25 03:58:45

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

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

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

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

谢谢Ben将缺陷提交给Apple！

来源

2014-09-25 03:57:08

我有完全相同的问题。我在苹果的错误追踪系统里开了一个bug报告上月-6，但无人问津： -/
它似乎有事情做与

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

来源

2014-09-30 13:46:00 aLiEnHeAd

我试图删除这个元标记，但我个人没有看到任何改变。看起来像iOS 8比之前的版本更糟糕。感谢您的评论，也许它会帮助别人。也感谢您打开另一个错误报告。也许如果有足够的人提出这个问题，它会得到解决。 – 2014-10-06 19:22:15

如果您将页面添加到主屏幕，则可能需要在代码更改后重新添加它。我在我的答案中添加了更多的代码。它在使用iOS 8.0.2的iPad 3上工作，拍摄照片后无需调整屏幕大小 – aLiEnHeAd 2014-10-07 06:36:08

苹果修复了这个漏洞的是iOS 8.3测试版1

来源

2015-02-13 11:00:44 aLiEnHeAd

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

回答

相关问题