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網絡應用程序屏幕在加載相機應用程序後縮小

回答

相關問題