Site web plein écran sous android : le clavier virtuel laisse un espace blanc à sa fermeture.

**zampai** · 05/01/2019, 15h53

Bonjour,

Je développe une page web pour faire une appli plein écran sous android (j'espère être dans le bon forum).

Ma page contient un formulaire. Voici le code minimal :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
input{padding:0.4em; font-size:0.6em;}
</style>
</head>
<body style="background-image: url('bkg.jpg'); margin:100px; font-size:3em;">
<?php
print_r($_GET); 
?>
<form method='get'>
<input type='text' name='test'>
<input type='submit' value='Send !'>
</form>
 
</body>
</html>

Et voici le JSON associé (pour l'affichage paysage plein écran) :

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
  "short_name": "test",
  "name": "test",
  "start_url": "test.php",
  "display": "fullscreen",
  "orientation": "landscape"
}

Tout va bien sauf (Je joins un print-screen pour aider) :

Problème, quand je soumets le formulaire (image 3), le clavier virtuel disparaît mais il laisse une empreinte blanche sur la page, alors que celle-ci se recharge bien.
Il faut toucher l'écran ou recharger encore la page pour que tout rentre en ordre (image 4).

Je n'arrive pas à solution ce problème.

Merci pour votre aide.

Nom : xLgIf.jpg
Affichages : 583
Taille : 121,8 Ko

Nom : xLgIf.jpg
Affichages : 583
Taille : 121,8 Ko

**NoSmoking** · 06/01/2019, 11h09

Bonjour et bienvenue sur DVP.

Pour commencer il te faudrait regrouper tous les styles dans la partie <style></style> de ton document pour plus de cohérence.

Pour continuer essaies de dimensionner ton body en lui ajoutant une hauteur minimum.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
body {
  margin: 100px;
  min-height: 100vh;
  font-size: 3em;
  background-image: url('bkg.jpg');
}

De plus une balise <meta> du type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ne mange pas de pain.

**zampai** · 06/01/2019, 15h14

Merci pour cette réponse rapide.

Pour les styles tu as raison (mais dans mon appli complète j'ai une CSS).

Donc, ça n'a pas solutionné le problème d'ajouter la ligne suivante dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ca n'a pas solutionné non plus le problème d'ajouter le style suivant pour le body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

min-height: 100vh;

Ce qui a partiellement solutionné mon problème c'est de mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  "display": "standalone",

dans le JSON, au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  "display": "fullscreen",

Je dis "partiellement" car, sur ma tablette nexus 10 (un peu ancienne) tout fonctionne bien ! J'ai une belle expérience full-screen avec un clavier virtuel qui se cache proprement. Alors que sur mon téléphone Nokia 6.1 tout récent je n'ai plus de plein écran, j'ai les deux barres de statu et de navigation qui restent apparentes autour de l'appli.

Je suis pourtant censé être en "standalone". Voici le lien explicatif pour le JSON (si ça peut aider) : https://developers.google.com/web/fu...b-app-manifest
Et voici un petit print-screen de mon tél :
Nom : cap2.jpeg
Affichages : 550
Taille : 83,4 Ko

Nom : cap2.jpeg
Affichages : 550
Taille : 83,4 Ko

Voilà le nouveau code :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest_test.json">
<style>
input{padding:0.4em; font-size:0.6em;}
body {background-image: url('bkg.jpg'); margin:100px; font-size:3em; min-height: 100vh;}
</style>
</head>
<body>
<?php
print_r($_GET); 
?>
<form method='get'>
<input type='text' name='test'>
<input type='submit' value='Send !'>
</form>
</body>
</html>

Et le nouveaux JSON :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
  "short_name": "TEST",
  "name": "Test",
  "start_url": "test.php",
  "display": "standalone",
  "orientation": "landscape"
}

**NoSmoking** · 07/01/2019, 11h49

Peut être un problème lié au « refresh » sur ton appareil, essaie peut être de rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html, body {
  min-width: 100vw;  
  min-height: 100vh;
}

sinon ...

**zampai** · 19/01/2019, 21h54

Non, rien n'y fait.
Décidément je passe à côté de quelque chose.
Peut-être un jour je tomberai sur la réponse, ou sur la bonne façon de poser la question...

Parce que c'est impossible que je sois seul dans ce cas...
Merci pour ton aide en tout cas.

Site web plein écran sous android : le clavier virtuel laisse un espace blanc à sa fermeture.

CSS

Discussions similaires

Partager

Partager