web-dev-qa-db-fra.com

iOS 8: position de la barre d'état des applications Web et problèmes de redimensionnement

Lors de la définition des balises META

Apple-mobile-web-app-capable

et

Apple-mobile-web-app-status-bar-style

pour créer une application Web plein écran, la barre d'état iOS se trouve en haut de l'écran (translucide) et une barre noire vide supplémentaire se trouve en bas.

Voici mon code:

<!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">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>

Il y a un problème supplémentaire avec la balise Apple-mobile-web-app-status-bar-style. Après avoir pris et accepté une photo via l'entrée de l'appareil photo, des barres noires apparaissent sur les côtés de l'écran . J'utilise iOS8 GM sur un iPad3.

Je pense que cela pourrait être un bug d'iOS 8 mais Apple ne semble pas se soucier de mon rapport de bug :(

Est-ce que quelqu'un connaît une solution/solution de contournement pour ce problème?

Mise à jour 1: Apple a marqué mon rapport de bogue comme étant en double (fermé) le 19 septembre.

Mise à jour 2: Un bogue est corrigé dans iOS 8.3 Bêta 1.

htmliosmobileios8
39
aLiEnHeAd

Apple a corrigé ce bug dans iOS 8.3 beta 1

3
aLiEnHeAd

Techniquement, ceci n’est pas une réponse à votre question, mais j’ai documenté mes conclusions tout en essayant de résoudre ce problème moi-même, et voici ce que j’ai trouvé jusqu’à présent. J'allais l'afficher comme c'est sa propre question, mais j'ai pensé qu'il serait fermé comme un duplicata.

Sur les appareils iOS8 exécutant des applications Web épinglées. En ce qui concerne le tag:

<meta name="Apple-mobile-web-app-status-bar-style" content="black">

De la référence de développeur Apple :

Si le contenu est défini par défaut, la barre d'état apparaît normale. Si défini sur noir, la barre d'état a un arrière-plan noir. Si cette option est définie sur noir-translucide, la barre d'état est noire et translucide. S'il est défini par défaut ou en noir, le contenu Web s'affiche sous la barre d'état. Si ce paramètre est défini sur noir-translucide, le contenu Web s'affiche sur tout l'écran, partiellement masqué par la barre d'état. La valeur par défaut est default.

Pour activer cette fonctionnalité, vous devez utiliser

<meta name="Apple-mobile-web-app-capable" content="yes">

Dans iOS6 et 7, cela fonctionne plus ou moins comme prévu.

Dans iOS8, cela semble être entièrement cassé. Par exemple, iOS 8.0.2 exécuté sur un iPad Air en mode portrait présente le comportement suivant:

  • black résulte en un fond transparent. Il y a une barre noire solide au bas de l'écran
  • default ou ne pas définir de valeur entraîne un fond transparent et une barre pleine blanche au bas de l'écran
  • black-translucent donne un fond transparent, mais pas de barres gênantes au bas de l'écran

Dans tous les cas, le contenu apparaît "sous" la barre. la barre ne pousse pas le contenu vers le bas.

Sur un iPhone6, la barre d'état ne s'affiche pas du tout en mode paysage. En portrait cependant, le comportement suivant:

  • black fonctionne comme prévu et le contenu est abaissé (wow !!!)
  • default a une barre blanche vide en haut
  • black-translucent crée un fond transparent, avec le contenu en dessous

Je n'ai pas eu l'occasion de tester sur un iPhone6 ​​+

Le simulateur iOS sous xcode ne semble pas donner une reproduction fiable du comportement qui se produit sur des appareils réels.

J'ai essayé de le changer dynamiquement avec javascript, mais il semble n'avoir aucun effet.

Juste pour rendre cela encore plus intéressant/frustrant, vous pouvez recouvrir la barre d'état (horloge/wifi, etc.) en définissant des styles sur l'élément html. par exemple.

  html {background: black;}
  body {background: #DDD; margin-top: 20px}

Le même problème documenté ailleurs:

35
captainclam

Le problème existait depuis iOS6 . Je l'avais précédemment posté dans le rapport de bogue d'Apple avec tous les détails que vous fournissez aujourd'hui, et plus tard, elle était marquée comme étant en double. C'était il y a 2 ans et malheureusement, aujourd'hui, j'ai découvert que c'était encore pire.

Le rapport de bogue d'origine a l'identifiant 11966202 et est toujours (Ouvert) . Puisque vous avez le même problème, vous ne pouvez que confirmer le bogue qui l'escaladera et le corrigera à l'avenir.

Comme je l'ai dit, je recherche une solution suffisamment importante pour vous dire qu'il n'existe pas de solution de contournement ... Le problème peut être reproduit sur tous les appareils iOS, mais se comporte différemment en fonction de la taille et de l'orientation de l'écran.

Avec iOS 8, nous rencontrons maintenant un problème qui fait que la fenêtre d'affichage ne devient qu'une très petite partie de l'écran et qu'elle se ferme/se ferme complètement.

EDIT: Apple Ticket est maintenant fermé

À compter de lundi, Apple avait fermé le ticket et je peux confirmer que l'utilisation de la version 8.1 résout enfin les problèmes de caméra et de barre d'état que je rencontrais. J'espère que ça a résolu vos problèmes aussi :)

7
HEDWIN

Le problème provient de l'utilisation de <meta name="Apple-mobile-web-app-status-bar-style" content="black">Pour vous débarrasser de la barre noire au bas de votre application, vous devez utiliser: <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent"> L'utilisation de black-translucent maintiendra l'apparence de votre application dans iOS7 et iOS8. Vous aurez toujours besoin d'ajuster le contenu en haut de votre application pour effacer les icônes de la barre d'état iOS.

5
DrumJammer

Pour développer tout ce qui précède, ma solution est la suivante:

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />

Créez ensuite un CSS personnalisé pour tous les éléments devant être rétrogradés de 20 pixels, en particulier tout position: fixed; top: 0px; existant dans votre CSS pour une vue de navigateur normal [bureau/mobile].

Ajoutez le CSS personnalisé dans la section head, sous les liens CSS avec le script suivant [mon exemple de travail]

<script type="text/javascript">
   if (window.navigator.standalone) {
       document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>

Mon résultat est que la vue du site Web du navigateur de bureau/mobile est normale, puis le site Web ajouté à l'écran d'accueil en tant qu'application Web, lors du lancement, s'ouvre en plein écran, avec une barre d'état ressemblant à celle d'avant ios8 [fyi, j'ai ajouté une couleur de fond noire mon en-tête fixe css pour la barre d'état pour afficher comme fond noir

Testé sur iPad/iPhone/iPod sous ios 8.0.2 - tout va bien. Pour votre information, testée sur le vieil iPod ios 6.1.6, elle s’attendait à un décalage supplémentaire de 20 pixels et n’y était pas - un bonus!

2
user1762289

Il est à noter que le fait de définir le style de barre d'état sur "noir" fonctionne comme prévu tant que vous ouvrez l'application Web avec votre iPad dans Portrait. Ensuite, même si vous faites pivoter l'iPad, la barre noire est correctement visible.

Le problème est que lorsque vous entrez dans l'application Web en mode paysage, du moins pour moi. J'utilise l'iPad 3 avec IOS 8.1 et je crois que c'est toujours le même en 8.3

1
Sebris87

Ajoutez simplement un div de 20 pixels en haut de votre application et laissez-le agir en tant que barre d'état.

0
Stephen O'Sullivan

Apple-mobile-web-app-status-bar-style est inactif dans iOS 8 . Si vous ajoutez un div fixe en haut, ajoutez-le uniquement pour OS 8_0

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
0
Dux