1486 sujets

Web Mobile et responsive web design

[Résolu] Bootstrap - iPad Pro - Vue tablette

Bonjour,

Nous venons de développer un site responsive à partir de maquettes définie par le client.
C'est maquettes comprennent une vue "mobile", une vue "tablette" et une vue "desktop".
La grille et l'apparence des vues "tablette" et "desktop" diffèrent foncièrement.

Pour l'implémentation, nous avons utilisé Bootstrap (version 4 en l'occurence).
- Pour ce qui est de la vue "tablette", nous évoluons dans le "lg" (992px à 1199px);
- Pour ce qui est de la vue "desktop", nous évoluons dans le "xl" (1200px à l'infini et au-delà).

Je mets "mobile", "tablette" et "desktop" entre guillemets car ils s'agit là d'un abus de langage : Bootstrap se basant sur la largeur du viewport et non sur la nature du device pour fonctionner. Et c'est là que le bat blesse :
Le client exige (de longues discussions stériles ont précédé ce post : je n'obtiendrai pas raison) que lors de la consultation sur son iPad Pro, le site lui soit présenté sous son aspect "tablette". C'est bien entendu la vue desktop qui est appliquée.

Ma question : Quelles solutions préconiseriez-vous pour répondre aux attentes du client sans tout redévelopper ?

Mes idées :
1 - Via un habile JS, modifier le ratio ces du device ciblé pour faire croire à un with inférieur à la réalité.
2 - Réécrire une surcharge de bootstrap.css qui se cantonnerait à des device ciblés via les media-queries adéquates (mais j'ai peur d'avoir trop de CSS a réécrire).
3 - Bah... J'ai pas vraiment plus d'idées...

Question subsidiaire : Pour un éventuel projet avec la même problématique, connaiteriez-vous d'autres frameworks responsives plutôt orientés type de device que largeur du viewport ?


Merci à vous,


Antoine
Modifié par RockMakesMeSweat (12 Apr 2022 - 20:59)
Détecter le côté tactile avec @media (pointer:coarse) et appliquer alors le css tablette.

Ou alors tu changes le seuil à 1400px !
Modifié par kerlutinoec (12 Apr 2022 - 21:45)
Salut Kerlutinoec et merci pour ta réponse !

kerlutinoec a écrit :
Détecter le côté tactile avec @media (pointer:coarse) et appliquer alors le css tablette.
=> Du coup je bascule dans la solution 2 qui j'avoue me fait un peu peur (je me rend pas compte exactement de la quantité de code que je vais devoir surcharger, mais je vais étudier ça).

kerlutinoec a écrit :
Ou alors tu changes le seuil à 1400px !
=> Ca ça me parait coller à mon cas. En effet il faut que sur desktop, ça prenne l'apparence "maquette desktop", et dans la cible, il y a des desktop dont le viewport fai tmoins de 1400px de large.

Antoine
RockMakesMeSweat a écrit :

=>Du coup je bascule dans la solution 2 qui j'avoue me fait un peu peur (je me rend pas compte exactement de la quantité de code que je vais devoir surcharger, mais je vais étudier ça).


=> En fait ce qui m'ennuis le plus dans cette solution c'est ce genre de cas de figure :

Dans une page, j'ai 2 rows construites ainsi :

<div class="row">
     <div class="col-lg-4 col-xl-8">div A</div>
     <div class="col-lg-8 col-xl-4">div B</div>
</div>
<div class="row">
     <div class="col-lg-4 col-xl-4">div C</div>
     <div class="col-lg-4 col-xl-4">div D</div>
     <div class="col-lg-4 col-xl-4">div E</div>
</div>


Je pourrais faire une surchage dans le scope de la media-querie "touch" qui dirait que "col-xl-8" occuperait le même espace que "col-lg-4" et le job serait fait pour la première row, mais dans le même temps, je mettrai à mal l'apparence de ma seconde row.

Bref, je vois pas trop de solution, sinon réécrire énormément de css.


Antoine
Pas trop bien compris pourquoi la mise en page de tes colonnes deviendrait subitement dégueu en passer d'un seuil 1200 à 1400px.
kerlutinoec a écrit :
Pas trop bien compris pourquoi la mise en page de tes colonnes deviendrait subitement dégueu en passer d'un seuil 1200 à 1400px.

=> Rien de dégueu en effet, juste que pour un desktop dont la largeur du viewport serait égale à 1300px (par exemple), je me retrouverai à présenter un emise en page correspondant à la maquette "tablette" alors que le client lui s'attend à avoir un rendu correspondant à la vue "desktop". Bref, le serpent qui se mord la queue.
RockMakesMeSweat a écrit :

=&gt; Rien de dégueu en effet, juste que pour un desktop dont la largeur du viewport serait égale à 1300px (par exemple), je me retrouverai à présenter un emise en page correspondant à la maquette "tablette" alors que le client lui s'attend à avoir un rendu correspondant à la vue "desktop". Bref, le serpent qui se mord la queue.


Ca existe des laptops à 1300px de large de nos jours ? (Peut être un notebook léger ou un vieux laptop d'avant 2010.)
Modérateur
Salut,

Dur les demande client a contre courant de tout bon sens technique...

Bon je propose un bricolage. Avec le CSS le bootstramp en local tu cherches les occurence de la média 
@media (min-width: 1200px) {

J'en ai trouvé 9, t'es peut être pas obligé de le faire pour toutes. Et tu rajoute :
@media (min-width: 1200px), (min-width: 1400px) and (hover: none) {

Donc la média serait active pour les écrans en dessous de 1200px OU les tablette (les média sans survol possible) en dessous de 1400px. Donc normalement une desktop en 1300px ne sera pas pris en compte.
hover:none est assez récent et permet de savoir si il y a un dispositif de survol, donc théoriquement pas l'ipad pro de ton client (je dit bein théoriquement parceque je connaissais pas et j'ai jamais testé du coup)

Un peu de bricolage mais ca me semble el moins couteux a mettre en place.

Bon courage

spec : https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries

source de l'idée : https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen
Modifié par _laurent (13 Apr 2022 - 15:45)
_laurent a écrit :
Salut,

Dur les demande client a contre courant de tout bon sens technique...

Bon je propose un bricolage. Avec le CSS le bootstramp en local tu cherches les occurence de la média 
@media (min-width: 1200px) {

J'en ai trouvé 9, t'es peut être pas obligé de le faire pour toutes. Et tu rajoute :
@media (min-width: 1200px), (min-width: 1400px) and (hover: none) {

Donc la média serait active pour les écrans en dessous de 1200px OU les tablette (les média sans survol possible) en dessous de 1400px. Donc normalement une desktop en 1300px ne sera pas pris en compte.
hover:none est assez récent et permet de savoir si il y a un dispositif de survol, donc théoriquement pas l'ipad pro de ton client (je dit bein théoriquement parceque je connaissais pas et j'ai jamais testé du coup)

Un peu de bricolage mais ca me semble el moins couteux a mettre en place.

Bon courage

spec : https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries

source de l'idée : https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen


Il me semble avoir lu que certains devices tactiles déclenchaient le hover au moment du touché (et donc le reconnaissaient), notamment iOS. C'est pour cela que j'utilise @media (pointer:coarse) à la place (pointeur = gros doigt disponible).
_laurent a écrit :

Un peu de bricolage mais ca me semble el moins couteux a mettre en place.


Bonjour Laurent,

Merci pour cette suggestion !
Je vais tenter cette approche qui me parait être la moins couteuse !

Merci à toi et à Kerlutinoec, vous m'avez bien aidé dans ma réflexion !

Je vais mettre le sujet en résolu !

Antoine

PS : Des inputs pour ma question subsidiaire ?
Sujet clos
Aller à