web-dev-qa-db-fra.com

Comment adapter la page Web à la largeur de la vue Web lorsque la vue Web est redimensionnée (sans rechargement)

J'ai une page HTML et un plein écran Android webview. Le contenu HTML est plus grand que la zone visible de la webview. Je veux pour adapter le contenu HTML à la largeur de la vue Web.

Ce qui est vraiment important, c'est ceci: lorsque l'orientation de l'appareil change, la vue Web ne se rechargera pas, ce qui signifie qu'elle se redimensionnera simplement et que le contenu s'adapterait à la largeur.

Une dernière chose: le contenu ayant été réduit, l'utilisateur peut le zoomer à une échelle maximale de 100%. Lorsque le contenu est zoomé et que l'orientation change, je souhaite que le contenu s'adapte à nouveau à la largeur.

Edit 1 : Je peux changer les balises META dans la tête de HTML, mais son contenu reste plus grand que la zone visible de la vue Web. Je soutiens Android 2.3 et versions ultérieures.

Edit 2 : Merci pour la suggestion sur la conception de sites Web réactifs. Je sais ce que c'est et je peux le faire. Le problème est que je ne peux pas changer une grande partie du contenu HTML dans ce cas.

TL; DR: comment toujours adapter un contenu HTML plus grand à une Android largeur de la vue Web lorsque la vue Web se redimensionne, sans recharger le contenu. (Je peux changer la vue Web, pas beaucoup de HTML.)

androidwebviewresizeorientation
17
Hoang Huynh

faire les réglages suivants

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);
16
Sush

Cela peut sembler une réponse indirecte, mais je pense que cela dépend de la façon dont vous créez le reste de votre site. Chaque fois que je travaille sur des sites responsives, j'utilise:

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

Cela fera deux choses: width=device-width Trouvera la largeur de votre appareil et enverra des styles de votre CSS qui correspondent à cette taille (vous pouvez définir des styles pour des tailles spécifiques dans votre CSS, à l'aide de requêtes multimédias). Initial-scale=1 Fera apparaître le site à 100% lors du chargement, mais donnera toujours aux utilisateurs la possibilité de zoomer.

Si votre site est développé pour une largeur spécifique, vous pouvez essayer d'utiliser:

<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">

Cela réduira simplement votre site pour s'adapter à la largeur de l'appareil. Rien de très spécial ici, les utilisateurs ne verront essentiellement que des mini-sites de bureau.

Je recommanderais de lire cet article Webdesign Tuts + . Ils expliquent bien la balise META viewport, avec des exemples.

4
Meg

Vous n'avez rien à changer sur Webview, tout ce dont vous avez besoin est une page HTML réactive, si vous êtes concepteur, cela résoudra votre problème ou vous pouvez publier une partie de votre question avec une balise d'interface utilisateur.

Pour créer des pages HTML réactives, vous pouvez visiter: ICI

Résultat: vous devez tester sur la vue Web lors de la création de votre page HTML réactive, le navigateur par défaut de Android lui-même reflète que votre page HTML est sensible ou non. Une fois qu'il fonctionnera dans le navigateur par défaut dans Android appareil, cela fonctionnera dans n'importe quelle vue Web sur Android.

Test: vous pouvez tester votre page html responsive ICI

2
KOTIOS

Voici un conseil pour une conception Web réactive, utilisez des positions plutôt que des largeurs:

Par exemple:

html

<div id="somediv">I'm just a div, just a regular div.</div>

css

#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}

Le div ci-dessus sera automatiquement redimensionné en fonction de la largeur de l'écran.

0
r3wt

Je devrais voir la source de votre code HTML et CSS. Vous devez utiliser exclusivement des tailles% et ne jamais utiliser des tailles px de largeur fixe. Ensuite, l'utilisateur peut modifier la taille du navigateur et il redimensionnera dynamiquement. J'utilise également% largeurs à cause de cela. Il redimensionne également dynamiquement si vous utilisez CTRL-MouseWheel (zoom).

0
Chloe