J'essaye d'ajouter deux toiles à une page web. Voulez-vous que je veux est d'avoir une toile pour la vue mobile et une autre toile pour la vue de bureau. J'utilise la bibliothèque p5.js.Deux toiles sur une page p5.js
J'ai réussi à utiliser des requêtes média et css pour n'afficher que le canevas mobile - bien que le canevas de bureau ne soit visible nulle part.
Voici ce que les scripts sont inclus dans la tête:
<script src="sketches/memoriesMainPage.js" type="text/javascript"></script>
<script src="sketches/memoriesColorRoad.js" type="text/javascript"></script>
J'ai donné chaque esquissent une classe dans leur script spécifique, dans la fonction setup() - memoriesMainPage.js:
canvas.class("mainSketch");
Le croquis mobile - memoriesColorRoad.js:
canvas.class("phoneSketch");
Le CSS:
.mainSketch {
display: block;
}
.phoneSketch {
display: none;
}
@media only screen and (max-width: 500px) {
.phoneSketch {
display: block;
}
}
Le code ci-dessus fonctionne pour la vue mobile. Le canevas par défaut est toujours phoneSketch, le mainSketch est introuvable lorsque j'inspecte la page sur Google Inspect.
Quelqu'un peut-il aider?
Pouvez-vous s'il vous plaît poster un [mcve] que nous peut réellement courir, ou mieux encore un JSFiddle ou un CodePen exécutant votre CSS? Notez que vous devriez obtenir ceci en travaillant avec deux balises 'div' avant de déranger avec le canevas P5.js. –
Il semble étrange de générer 2 canevas, il se peut que vous deviez d'abord détecter le type de périphérique, puis générer une canevas adaptée. – HReynaud
Ses deux animations, l'une conçue pour le mobile et l'autre conçue pour une fenêtre de bureau. Rien d'étrange à ce sujet. –