3 votes

Navigateur de corps de zoom

J'ajouterais les boutons A+ et A-zoom de mon site. Je souhaite que tout le corps soit grossissant J'ai donc créé ce code

<html>
<body>
    <style>
    .container{width: 800px;background: #000;}
    p{color:#fff;}
    a { color: #FFCC00;}
    </style>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
<script type="text/javascript">
function ZoomScreen100() {
document.body.style.zoom="100%"
 }
function ZoomScreen200() {
document.body.style.zoom="200%"
 } 
function ZoomScreen300() {
document.body.style.zoom="300%"
}
function ZoomScreen400() {
document.body.style.zoom="400%"
document.body.style.zoom="400%"
}
</script>
<a href="#" onclick="ZoomScreen100()">A+</a>
<a href="#" onclick="ZoomScreen200()">A+</a>
<a href="#" onclick="ZoomScreen300()">A+</a>
<a href="#" onclick="ZoomScreen400()">A+</a>
</body>

Il fonctionne sur Chrome, Internet Explorer, Safari mais pas sur Firefox et Opera. Pourquoi ?

6voto

Pavlo Points 7084

zoom est une propriété non standard que n'a pas été implémenté par Firefox la propriété la plus proche dans les navigateurs croisés est transform ( Démonstration ) :

document.body.style.transform = 'scale(2)';

L'effet, cependant, sera différent de l'application de zoom : le contexte parent (par exemple, la largeur, la hauteur) ne sera pas mis à jour. Si c'est votre intention, vous pouvez envisager d'utiliser calc() et un multiplicateur sur les propriétés sélectionnées :

document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;

1voto

user1329482 Points 561

Jetez un coup d'œil à http://www.browsersupport.net/CSS/zoom . Je n'ai pas réussi à le faire fonctionner (généralement) dans Firefox ou Opera, et l'explication la plus simple est que ces navigateurs n'ont pas implémenté de support pour cela. (Firefox 23.0.1 a passé l'un des tests du site lié ; Opera 12.16 n'a passé aucun des deux).

Ce n'est pas ce que vous avez écrit, c'est que les navigateurs que vous mentionnez ne sont pas encore prêts pour cela. (Ce n'est pas surprenant - même si vous trouverez des sites qui vous diront que le zoom est dans la spécification, je ne peux pas le trouver listé n'importe où dans les documents réels du W3C. Peut-être après plus de caféine....)

Cela dit, n'oubliez pas qu'une page conforme comporte un élément et que c'est là que vont les styles. Je suppose qu'il s'agissait d'une mise en page rapide et que vous avez oublié l'élément head :)

1voto

SystemDZ Points 21

https://stackoverflow.com/a/64473943/3534015

La meilleure solution consiste à utiliser zoom: 50%

J'ai fait cet exemple avec javascript, vous pouvez le tester et le modifier comme vous le souhaitez.

var zoomediv = document.getElementById('zoomediv')

var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
  zoomediv.style.zoom = '125%'
})

var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
  zoomediv.style.zoom = '75%'
})

div {
  background: #f0f0f0;

  border: 1px solid #e0e0e0;
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  padding: 0 3rem;
}

<div id="zoomediv">
  <h1>
    Title
  </h1>
  <p>
    this is a paragraph
  </p>
</div>

<button id="zoomin">
  <h1>
    +
  </h1>
</button>

<button id="zoomout">
  <h1>
    -
  </h1>
</button>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X