Simuler un CTRL+ molette en javascript

Version imprimable

27/11/2017, 05h25
_Yalta

Simuler un CTRL+ molette en javascript

Bonjour,

Je voudrais adapter la taille de mon site aux résolutions des clients, et le plus simple je pense serait de faire comme fait CTRL+molette ( ce qui m'éviterait de tout passer en % ainsi que la gestion des polices ), mais je vois pas trop comment, si quelqu'un a une piste ...

Merci à vous :)
27/11/2017, 13h56
JujuPomme

Hello,

Citation:

Je voudrais adapter la taille de mon site aux résolutions des clients, et le plus simple je pense serait de faire comme fait CTRL+molette

WHUUUUUUUUUUUUUUUUUUUUUUUUUUUUUT

En vrai, tu veux juste que ton site soit responsive?

Je ne veux pas cerner le problème trop vite donc je préfère demander confirmation.
27/11/2017, 14h50
_Yalta

Et bien en fait le site que je fais est de taille fixe, c'est un rectangle, alors je l'ai adapté à une résolution de 1600*900 mais je ne veux pas qu'il soit trop petit en trop grande résolution ni qu'il y ait de scrollbar pour les petites résolutions. Je te donne le lien ce sera plus simple pour comprendre : voirdupays.net

Donc oui le 'ctrl+molette' est très bien car tout suit, aucune déformation, et ça marche même si rien n'est en %

Je pensais peut-être jouer sur le style du body ... mais en vain
27/11/2017, 15h29
headmax

Lorsqu'on souhaite adapter son design au différent support, soit on s'oriente de suite vers les technos qui mâche le boulot angularjs, sass, compass ... ou alors on fait soit même en s'informant et en étudiant ce que sont les médias queries souvent appelé web responsive j'imagine a cause des événements CSS qui réagit sur la taille de l'écran et adapte ton rendu en fonction, il faudra bien paramétrer la méta qui va bien.
27/11/2017, 16h41
NoSmoking

Bonjour,

Citation:

Envoyé par headmax

Lorsqu'on souhaite adapter son design au différent support, soit on s'oriente de suite vers les technos qui mâche le boulot angularjs, sass, compass ...

j'ai du mal à voir il te permette de « fignoler » ton design !

Citation:

...ce que sont les médias queries souvent appelé web responsive j'imagine a cause des événements CSS qui réagit sur la taille de l'écran et adapte ton rendu en fonction, il faudra bien paramétrer la méta qui va bien.

il ne faut pas tout mélanger les « media queries » qui font partie de la spécifications CSS3 et la notion de responsive web design que désigne plutôt une approche de réalisation multi-supports, Desktop, tablette etc.., du rendu d'un site. Certains sites sont/étaient « responsive » sans utilisation des « media queries ».

Pour en revenir au soucis de _Yalta je pense que c'est une mauvaise solution attendu que les visiteurs doivent rester maitre de leur façon de naviguer.
27/11/2017, 20h01
_Yalta

Merci à vous 2 pour vos réponses :)

Je ne connaissais pas tous ces termes, dsl, et je vais m'y intéresser ( en fait je n'utilise aucun logiciel autre que notepad++ je suis très basique et ne me mets pas à jour et n'utilise aucun outil de dev ) , même si j'ai l'impression de les avoir appliqués je pense en partie pour d'autres sites au niveau de la structure, mais comme j'ai refondu ce site plusieurs fois ça devient compliqué, de plus les éléments de chaque div sont dans la bdd, et je cherchais le moyen le plus court surtout que j'ai du temps à perdre pour remplir la bdd de données !

Il y a des loupes en javascript je crois je pourrais peut-être les adapter, sinon pas besoin de javascript je peux faire ça en php car c'est juste au départ du site, qu'en pensez-vous ?
27/11/2017, 20h24
_Yalta

En attendant de trouver une soluce je vais laisser une phrase sur le site pour leur expliquer qu'ils peuvent utiliser CTRL+molette pour qu'ils adaptent le site à leur écran comme j'ai vu d'autres sites le faire, mais c'est pas génial ...
28/11/2017, 23h13
Watilin

Citation:

ce qui m'éviterait de tout passer en % ainsi que la gestion des polices

C’est pourtant la meilleure chose à faire, pour toi (plus simple) comme pour tes utilisateurs et utilisatrices (plus accessible). Connais-tu l’unité rem ? Voir aussi cette page et aussi les Cours JavaScript

En ce qui concerne la simulation d’évènements, il faut savoir que les évènements généres par script sont marqués untrusted et, généralement, ne déclenchent pas les actions par défaut. Même si tu arrives à générer un évènement correspondant à Ctrl+scroll, il y a fort à parier qu’il n’entraînera pas un changement de zoom dans l’interface.
29/11/2017, 18h03
_Yalta

Et bien c'est surement ce que je vais faire snif :) Je vais quand-même suivre une dernière piste avec jquery avant d'abandonner ... je vous tiens au courant ...

J'ai trouvé quelque-chose qui a l'air de fonctionner :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.r768 {
    -moz-transform: scale(0.8, 0.8); 
    zoom: 0.8;
    zoom: 80%; 
}
</style>
 
<script type="text/javascript">
if( parseInt( screen.height ) == 768 )
{
	document.getElementById('Body').className = 'r768';
}
</script>

03/12/2017, 10h29
NoSmoking

Si cela te convient pourquoi pas même si tu aurais meilleur compte de passer par les Media Queries pour gérer ton zoom, le navigateur n'occupant pas forcément la largeur de l'écran.