Liseuse

Bonjour à tous
Je viens de faire l'acquisition d'une liseuse musicale PadMu dont l'écran est en "niveaux de gris"
Cet appareil est en fait une tablette de grande taille sous Android avec une application spécifique de gestion de pages adaptée aux musiciens.
Pour charger les partitions, je peux utiliser le navigateur, qui semble être plus ou moins issu de Chrome et me permet d'accéder à un site web et de télécharger les partitions au format PDF.

Mon problème : le site a été conçu pour des appareils supportant la couleur, et une fois réduit en niveaux de gris la lecture des pages n'est pas très agréable.

Ma question : comment faire un CSS spécifique "niveaux de gris", en particulier comment détecter que le client utilise une telle tablette et quelles pourraient être les "bonnes pratiques" pour ne pas avoir à réinventer toute la présentation du site ?

Merci de m'apporter votre aide dans un cas relativement peu commun, mais qui en fait se pose déjà pour certaines liseuses Kindle ou autres, où on voit bien que la couverture du livre, généralement en couleur, est difficilement lisible sur l'appareil.
Modifié par PapyJP (27 Aug 2023 - 11:30)

Salut,

La solution que je vais donner n'est pas propre, mais aura le mérite de fonctionner :

body:before{
content: '';
backdrop-filter: grayscale(1);
pointer-events: none;
position: fixed;
top:0;
right:0;
bottom: 0;
left:0;
}

Pour quelque chose de plus propre et je pense que ça doit fonctionner, le jeu de couleur doit être variabilisé et suivant le user-agent ou la taille de l'écran, tu redéfinies les couleurs.

Je ne comprends pas très bien ce que tu proposes

Voici une photo de l'écran de la tablette affichant une page du site web

Ce que je cherche, c'est améliorer la lisibilité sans pour autant devoir refaire tous les fichiers .css du site.

Bonjour,

Moi je jouerais avec la propriété CSS filter ; par exemple :

html {
    filter: contrast(1.75);
}

Modifié par Olivier C (28 Aug 2023 - 19:25)