Un projet CTRL+ALT+R

No Vertical Web

Le web n'a pas été créé pour être vu au format vertical. Un script JavaScript autonome qui affiche un overlay plein écran quand un site est consulté en portrait. Aucune dépendance, environ 4 Ko, entièrement configurable.

Le raccourci clavier rafraîchit la page.
Le projet propose de rafraîchir le rapport au web.

Démo live

Cette page utilise No Vertical Web. Pour voir l'overlay, tourne ton écran en portrait, ou réduis la largeur de ta fenêtre en dessous de 768 px. La page se masquera, et le manifeste s'affichera.

Aperçu sans changer la fenêtre :

Note : pour préserver la démo, cette page d'accueil est exclue de l'effet (sélecteur .no-nvw). Sur ton propre site, c'est l'inverse qui se produit.

Usage minimal

Une seule ligne, juste avant la fermeture du </body> :

<script src="https://nvw.ctrlaltr.org/nvw.js"></script>

Sans configuration, le visiteur en vertical voit le manifeste signé CTRL+ALT+R.

Usage configuré

<script>
window.NVW_CONFIG = {
  ratioThreshold: 1.0,
  widthThreshold: 768,
  operator: 'AND',
  message: '<h1>Ton message</h1><p>Tourne ton écran.</p>',
  bgColor: '#000000',
  textColor: '#ffffff',
  imageUrl: '',
  customCss: '',
  excludeSelectors: ['.no-nvw']
};
</script>
<script src="https://nvw.ctrlaltr.org/nvw.js"></script>

Options

Option	Type	Défaut	Description
`ratioThreshold`	number	`1.0`	Seuil de ratio hauteur/largeur.
`widthThreshold`	number	`768`	Seuil de largeur en pixels.
`operator`	`'AND'`\|`'OR'`	`'AND'`	Combinaison des deux conditions.
`message`	HTML	manifeste CTRL+ALT+R	Contenu HTML de l'overlay.
`bgColor`	hex	`#000000`	Couleur de fond.
`textColor`	hex	`#ffffff`	Couleur du texte.
`imageUrl`	URL	`''`	Image / logo affiché au-dessus du message.
`customCss`	string	`''`	CSS additionnel injecté.
`excludeSelectors`	array	`[]`	Sélecteurs CSS où ne pas afficher l'overlay si un élément correspondant est présent.

Trois URL, trois usages

Canonique https://nvw.ctrlaltr.org/nvw.js

URL canonique CTRL+ALT+R. Suit toujours main. Test, démo, prototype, sites peu critiques.

Production · jsDelivr https://cdn.jsdelivr.net/gh/renopointcom/no-vertical-web@v1.0.0/nvw.js

URL CDN versionnée, immuable. Compatible Subresource Integrity (SRI). Recommandée pour la production.

Auto-hébergement curl -O https://nvw.ctrlaltr.org/nvw.js

Téléchargement direct. Tu sers le fichier depuis ton propre domaine. Voir docs/htaccess.example dans le dépôt.

Production avec SRI

<script
  src="https://cdn.jsdelivr.net/gh/renopointcom/no-vertical-web@v1.0.0/nvw.js"
  integrity="sha384-dryhVI3K834rbDLFKDvxMY0YxA5Gawmvuk5tRyX9jRghcq6nphsmOn3kFPQBO+gO"
  crossorigin="anonymous"></script>

Le hash SRI est publié dans le README du dépôt et mis à jour à chaque release.

Écosystème

Extension WordPress : en cours de soumission à wordpress.org/plugins.
Site de référence : nvw.ctrlaltr.org.
Projet parent : ctrlaltr.org.
Dépôt : github.com/renopointcom/no-vertical-web.

Licence

GPL v2 ou ultérieure. Tu peux le réutiliser, le modifier, le redistribuer. Tu peux aussi le laisser tel quel et te contenter de copier la ligne du haut.