İPhone / iPod touch için Safari iOS 7'de gezinme çubuklarını gizlemek imkansız

Çubukları programlı olarak javascript / css / html kullanarak gizlemenin herhangi bir çözümü olduğuna inanmıyorum, ancak bir sorunu açıklamaya çalışayım. Biz mobil oyun geliştiriciler ekibiyiz ve bir yıldır oyun geliştiriyoruz.

İOS 7 duyurusundan sonra, gezinme çubuklarını gizlemenin İMKANSIZ olduğu sorunuyla karşılaştık. Kullanıcı, Safari tarayıcısının üst veya alt kısmına dokunduğunda, gezinme çubukları yeniden görünür ve oyunun tüm kontrollerini gizler.

Şimdiye kadar bulduğumuz tek çözüm, kullanıcıyı şunlara zorluyor:

1. Cihazı döndür
2. Sayfayı kaydır
3. Ana ekrana uygulama ekle

Bu alternatiflerin hiçbiri kabul edilebilir değil. Görünüşe göre Apple bu sorunun farkında, ancak görmezden gelmeye devam ediyor. Bildirilen bir hatayı, # 14076889 numaralı hatanın bir kopyası olarak kapattılar.

Aynı sorunu yaşayan tek takım olmadığımıza inanıyorum. Çözümü bilen var mı?

Eylül 2014 Güncellemesi: iOS 8 minimal-uiözelliği kaldırdı Varsayılan tarayıcı davranışına dayanmaktan başka gezinme çubuklarını kaldırmanın / gizlemenin bir yolu daha yok (kaydırma sırasında çubuklar gizlenecek, ancak yalnızca kaydırma öğesiBODY sayfanın olması durumunda). Tek "geçici çözüm", uygulamayı ana ekrana kaydetmek ve uygun meta etiketleri ayarlamaktır (aşağıya bakın).

Ağustos 2014 Güncellemesi: iOS 8 (beta) artık desteklenmemektedirminimal-ui . Çözüm yok. (Bunun nedeni büyük olasılıkla, insanların başka yere gitmesini engellemek için onu kullanan web siteleri tarafından kötüye kullanımdan kaynaklanmaktadır, ancak iOS 8 Safari'de henüz halka açıklanmamış ve yerini alan yeni özellikler olabilir minimal-ui.)

iOS 7.1, bu sorunu çözmek için yeni bir API ekledi:

<meta name="viewport" content="minimal-ui">

Bu yeni görüntü alanı bayrağı, Safari kullanıcı arayüzünü varsayılan olarak gizler (yalnızca URL ve SSL göstergeli küçük bir başlık çubuğu gösterilir). Safari kullanıcı arayüzüne erişmek için kullanıcıların bu başlık çubuğuna aktif olarak dokunmaları gerekir.

Not olduğunu iOS 7.0.x üzerinde, hiçbir API ya da bilinen bir çözüm bulunmamaktadır bunun için. Bu sürümlerde, Safari'nin tarayıcı kromunu kalıcı olarak gizlemek istiyorsanız, kullanıcının web uygulamasını ana ekrana eklemesini sağlamanız (uygun meta etiketler ayarlı olarak <meta name="apple-mobile-web-app-capable" content="yes">) veya Phonegap gibi bir tür yerel uygulama sarmalayıcı kullanmanız ve aracılığıyla dağıtmanız gerekir. App Store.

Kişisel olarak, geliştiricileri ve kullanıcıları mutlu eden harika bir çözüm olan iOS 6 Mobil Safari'de yatay modda tanıttıkları "tam ekran" düğmesini kaldırmasalardı keşke.

Bunun daha kalıcı bir şekilde çözülmesi için mükemmel bir aday, Mobile Safari'nin HTML5 tam ekran API'sini (OS X'te Safari'de desteklenmektedir!) Desteklemesi olacaktır. Ne yazık ki, şu anda destek yok ve geçmişte iOS puan sürümleri yeni Safari özellikleri eklemiyordu, bu yüzden belki de bu iOS 8 için bir şey.

GÜNCELLEME : Sürüm notlarındaki bu forum gönderisine göre şu anda iOS7.1 Beta'da bunu düzeltmek için bir meta özellik var .

<meta name="viewport" content="minimal-ui">

Bir test çalıştırdım ve bu özelliğin şu anda Beta 2'de olduğunu doğrulayabilirim.

NOT : Yeni minimal-ui seçeneği harika bir çözümdür ancak HTML yanıtının bir parçası olması gerekir. Görünüm alanı meta etiketini JS ile eklemek için iOS7.1 beta3'te denedim

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

"minimal-ui" değeri tarayıcı tarafından yok sayılır.

Güncelleme: iOS7.1 artık NDA'nın kaldırılması için yayınlandı.

<meta name="viewport" content="minimal-ui">

Gerçekten doğru etikettir ve canlı yayında çalışır. Gerekirse "görüntü alanının" virgülle ayrılmış bir listeyi destekleyebileceğini unutmayın.

Web sitesini bir uygulama gibi hissettirmek için onu diğer mobil değişkenlerle birleştiriyorum:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

Biz de bununla mücadele ediyoruz. Sitemizde bir TabBar var ve bir sekmeyi her tıklamaya çalıştığınızda safari kontrolleri açılır.

Bugün umut. Apple geliştirici programının bir üyesiyseniz, bu forumu ziyaret etmenizi şiddetle tavsiye ederim: https://devforums.apple.com/message/927476

W

DÜZENLEME 2:

İOS 7.1'den beri çalışmıyor

DÜZENLE:

Bazı oyunlar , oyuncuya çubukları kaydırması için ipucu veren ve ardından çubuklar tekrar çıkana kadar kaydırmayı kilitleyen bir katman benimsemiştir . Bu durumda position: fixed, hareketi stabilize ettiği için çok yardımcı olur (daha iyi açıklayamaz, sadece kendiniz denemelisiniz). Bu oyun, bu tür bir yaklaşımın iyi bir örneğidir:

www.paf.com/mobile/launch/flowers.html (üzgünüm, 2'den fazla bağlantı gönderemezsiniz)

Son zamanlarda, aynı zamanda, üst alan. Tek yapmanız gereken, DOM'nuza aşağıdaki stillerle rastgele bir öğe eklemektir:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Bununla ilgili daha fazlasını buradan okuyun .

Bir web uygulaması oluşturuyorsanız, ana ekrandan URL'ye bir bağlantı oluşturabilirsiniz; ve aşağıdaki HTML Meta Etiketlerini kullanın:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Bu, göstergeleri başlık / gezinme çubuğunuzun üzerine süper empoze edecektir. (Tüm iPad ekranlarında gördüğünüz göstergeler.

Daha fazla bilgi için bkz: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Umarım bu birisine yardımcı olur, ancak görüntü alanı genişliğimi = aygıt genişliği olarak ayarlamak istemedim çünkü iphone 4'te 480 piksel .. ve oyunumun tüm aygıtlar için 800 piksel olmasını istiyorum.

Ve bunu ayarlamazsanız, minimal-ui kaydolmaz.

Etrafımdaki iş şu şekilde:

<meta name="viewport" content="width=device-width, minimal-ui">

Ve sonra sayfa yüklendikten sonra görüntü alanını değiştirmek:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

Çalıştığı için oldukça şok oldum. Adres çubuğu ve alt UI düğmeleri, yalnızca kullanıcı ekranın üst / altını tıkladığında görünür. Şimdi seviyorum.

Bu çözüm benim için çalıştı, ancak benim durumumda web uygulaması, kullanılacak Ipad'in kontrolüne sahip olduğum özel bir halk içindi.

Tüm olası meta etiketlerini ve hack'lerini kullanmaya çalıştım ve gerçekten, IOS8 minimal-ui özelliğini kaldırdıktan sonra, çözmek neredeyse imkansızdı.

Kutunun dışında düşünen ekibimiz güzel bir çözüme ulaştı:

Mercury tarayıcısı tam ekranda açılır ve sayfalar ücretlendirilirken bile adres çubuğu görünmez. Sağ alttaki küçük bir simgedir ve sadece :) Sorunumuz için mükemmel bir şekilde çalıştı!

Ama tekrar ediyorum: genel olarak halk için bir web uygulaması geliştiriyorsanız bunu kullanmayın. UX için kullanıcınızı uygulamaya erişmek için farklı bir tarayıcı indirmeye zorlamak korkunç.

GÜNCELLEME

Bir geliştirici arkadaşım bu çözümü buldu:

Appcelerator'dan Titanium'un içinde bir web görünümü kullanın. Apple mağazasında onaylanmayacak, ancak özel bir etkinlik için gayet iyi çalışacak!