Je sais que plusieurs outils (extension de Firefox Developer ou autres) permettent de simuler différentes largeurs d'affichage pour tester le rendu d'une page ou d'un site web que l'on souhaite responsive.
Mais je ne les trouve pas très pratiques (pas suffisamment à mon goût) alors je me suis bricolé ce petit outil léger et facile d'utilisation : le ZOOMER (prononcez "zoumeur")
Quelques précisions :
- Par souci de simplification, tout tient en un seul fichier : HTML, CSS, PHP et JS.
- Les largeurs saisies doivent être comprises entre 360px (paramétrable) et la largeur de la fenêtre (calculée après rechargement de la page)
- J'aurais pu utiliser une liste déroulante de dimensions standard, mais là, je peux choisir ma largeur au pixel près, et ça, ça a d'la gueule !
- La page visualisée peut être indiquée, au choix, par :
- son chemin relatif : /dossier/index.php
- son URL incluant le protocole et la page : https://www.domaine.tld/dossier/index.php
Vous pouvez donc l'utiliser, l'adapter, l'améliorer (non, ça, c'est pas possible) à condition de partager ce que vous en aurez fait avec la même licence.
N'oubliez pas de me rendre grâce
et allez en paix ! 
<?php
/*************************/
/* ZOOMER */
/* par Jérome F. GOUDEAU */
/* via www.phpfrance.com */
/* juillet 2025 */
/*************************/
/* GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2025 Jérome F. GOUDEAU
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published
by the Free Software Foundation, either version 3 of the License.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty
of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
define('MIN',360); //largeur minimale
define('DEF','/dev/projet_253624/v1138.01/index.php'); // page par défaut
$page = (isset($_POST['in_page']) && trim($_POST['in_page'])!='') ? trim($_POST['in_page']) : DEF;
$larg = (isset($_POST['in_larg'])) ? $_POST['in_larg'] : MIN;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ZOOMER : <?php echo $page; ?></title>
<style type="text/css">
* { margin:0 ; padding:0 ; box-sizing:border-box ; font-family:Calibri ; font-weight:bold ; }
html, body { width:100vw ; height:100% ; }
form { position:fixed ; display:block ; top:0 ; left:0 ; width:100% ; height:70px ; background:#000000 ; padding:10px 20px 20px 20px ; }
form p { font-size:1.5rem ; color:#999999 ; }
input { font-size:1.5rem ; text-align:center ; border-radius:10px ; background:#999999 ; }
input[type=text] { display:inline-block ; width:50% ; margin-right:50px ; padding-left:5px }
input[type=number] { display:inline-block ; width:100px ; }
input[type=submit] { display:inline-block ; background:#00AF00 ; color:#FFFFFF ; padding:1px 20px ; margin-left:50px ; }
main { height:100% ; width:100% ; margin:70px 0 0 0 ; padding:0 ; }
.rideau { display:inline-block ; height:100% ; width:calc(50% - <?php echo $larg/2; ?>px) ; background:#000000 ; margin:0 ; padding:0 ; }
iframe { display:inline-block ; height:100% ; width:<?php echo $larg; ?>px ; border:none ; overflow-y:auto ; margin:0 ; padding:0 ; }
</style>
</head>
<body>
<form method="post" action="#">
<p>page : <input id="in_page" name="in_page" type="text" value="<?php echo $page; ?>" />
largeur : <input id="in_larg" name="in_larg" type="number" value="<?php echo $larg; ?>" /> px (de <?php echo MIN; ?> à <span id='larg_max'></span>)
<input type="submit" value="Fais péter !" /></p>
</form>
<main>
<div class="rideau"></div><!--
--><iframe src="<?php echo $page; ?>"></iframe><!--
--><div class="rideau"></div>
</main>
<script type="text/javascript">
var largeur = window.innerWidth;
const min = <?php echo MIN; ?>;
document.getElementById('larg_max').innerHTML = largeur;
document.getElementById('in_larg').addEventListener('input', function(e)
{ if (this.value!=='')
{ if (parseInt(this.value) < min) this.value = min;
if (parseInt(this.value) > largeur) this.value = largeur;
}
});
</script>
</body>
</html>
