web-dev-qa-db-fra.com

Comment augmenter le niveau de zoom du navigateur lors du chargement de la page?

Comment augmenter le niveau de zoom du navigateur sur le chargement de la page?

voici mon lien web récemment, j’ai eu la tâche d’augmenter sa largeur comme si Firefox nous appuyions sur Ctrl + et le niveau de zoom du navigateur est augmenté s’il existe un moyen de le faire automatiquement dans tous les navigateurs au chargement de la page.

javascripthtmlcsshtml5
46
Danish Iqbal

Personnellement, je pense que c'est une mauvaise idée. Soit vous concevez votre site de manière à ce qu'il s'adapte facilement (pas vraiment avec les techniques CSS/HTML appropriées), ou bien vous permettez à l'utilisateur de faire ce qu'il veut (peut-être que son navigateur est déjà zoomé ou qu'il utilise une faible résolution). En règle générale, vous ne devez pas prendre de décisions concernant l'expérience utilisateur pour les personnes.

Mais c'est possible.

Démo: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-Origin: 0 0;
}

Notez que les versions précédentes de cette réponse utilisaient transform pour prendre en charge davantage de navigateurs. Toutefois, ce code abrégé semble fonctionner pour les versions actuelles de Chrome, FF, Safari et IE (ainsi que les versions précédentes d’IE, qui prenaient en charge zoom depuis longtemps.) ).

54
Tim Medora

Essaye ça:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>
16
Vinod

Vous pouvez essayer la règle CSS zoom. Je ne l'ai jamais vraiment essayé, mais en théorie, définir une règle CSS comme suit pourrait faire ce que vous voulez:

body { zoom: 2; }

Remarque: cela ne modifie pas réellement le niveau de zoom des navigateurs. Cela rend tout simplement plus gros sur la page :)

6
jeremysawesome

C’est une réponse aux messages étroits comme

Personnellement, je pense que c'est une mauvaise idée.

ou

pourquoi ne pas dire qu'il soit plus gros

etc

J'ai un PWA qui a un design minimaliste avec beaucoup d'espaces et qui était destiné aux téléphones mobiles (donc au départ, je ne pensais pas aux grands écrans). Ce n'est pas juste un site Web ennuyeux avec des articles. C'est assez complexe l'interface utilisateur.

Donc, lorsque vous l'ouvrez sur un très grand écran (téléviseur ou grand moniteur), il a vraiment l'air moche (car il y a trop de blancs à cet endroit). Et en tant qu'utilisateur, il faut à chaque fois effectuer un zoom avant. C'est assez stupide. Mon application Web est plus esthétique et plus facile à utiliser depuis un canapé à la télévision lorsqu'elle est un peu masquée sur ce grand écran.

Donc, ce que je fais, dans @media, je change la propriété de zoom si l'affichage est trop large. Le problème que -moz-transform: scale est absolument différent du zoom.

Donc, si vous voulez agrandir le site Web avec CSS, vous avez trois options:

  • (recommandé, plus difficile pour la page existante) Pour utiliser les unités em et rem lors du développement de votre page. Cela permettra de changer le "zoom" de la page aussi facilement que de changer la taille de la police dans le corps.

  • (plus facile pour les pages existantes) Utiliser "transform: scale" pour une expérience multi-navigateurs, mais cela peut ne pas fonctionner comme prévu.

  • (non recommandé, facile pour les pages existantes) Utiliser la propriété "zoom" CSS bien qu'il ne s'agisse pas d'une propriété standard. Sacrifie Firefox. En outre, avoir un comportement inattendu mineur avec les boîtes flexibles positionnées de manière absolue.

1
Kirill Reznikov