Faire un site pour PC et téléphone/tablette

**jlb59** · 24/07/2024, 19h56

Je vois tout ça demain
Mais je crois que les plus volumineux, c'est les pages où il y a le JS.

**laurentSc** · 24/07/2024, 21h25

Si ces pages sont trop lourdes, tu les transfères sans le js, tu m'en donnes le nom et je le récupère sur internet.

**jlb59** · 23/07/2024, 08h58

Bonjour Laurent,

Comme j'ai dit hier, je te mets l'arborescence de mon site sur le PC.

Comme il y a pas mal de fichiers en HTML + JS, ça risque de poser problème si je me mets au BootStrap.
Nom : 01.jpg
Affichages : 96
Taille : 24,4 Ko

Nom : 01.jpg
Affichages : 96
Taille : 24,4 Ko

Nom : 02.jpg
Affichages : 95
Taille : 16,8 Ko

Nom : 03.jpg
Affichages : 94
Taille : 17,9 Ko

Nom : 04.jpg
Affichages : 94
Taille : 20,2 Ko

Nom : 05.jpg
Affichages : 96
Taille : 24,5 Ko

Nom : 06.jpg
Affichages : 95
Taille : 17,6 Ko

Pour le problème cité, voici un petit aperçu du code pour les tests.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
(...)
			<form class='gauche t22' name="fm" action="javascrit,void(0);">
				<table class="gauche" style="width:100%;">
					<tr>
						<td colspan="7"><span id="res">&nbsp;</span></td>
					</tr>
					<tr>
						<td class="gauche" colspan="7"><input class="bouton t22" type="button" name="but" value="Commencez le test ?" onClick="window.clearTimeout(SD);tel+=1;t0=klok[tel];calc();"></td>
					</tr>
					<tr><td>&nbsp;</td></tr>
					<tr>
						<td class="gauche" colspan="7"><input class="bouton t22" type='button' name='but2' value=' Retour au choix des tests ? ' onclick=location.replace('?page=test_qi')></td>
					</tr>
				</table>
 
					<!-- ##### Pour l'affichage des résultats ##### -->
					<table class="gauche"><tr><td class="" colspan="7"><span id="okk">&nbsp;</span></td></tr></table>
				</form>
 
</section>
 
<!-- ************************************************* -->
<!-- tests_poulies1.js -->
<!-- ************************************************* -->
<script>
var iq = new Array(
//##### SERIE 1
"<tr><td style='border-style:none;text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies1.jpg' alt='' width='300px'>" +
"</td></tr>" +
"<tr colspan='5'>" +
"<td class='centre'><br /><label><br /><span class='cadre'>50kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>75kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>90kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>100kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=1;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>Je&nbsp;ne&nbsp;sais&nbsp;pas</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"</tr>",
 
//##### SERIE 2
"<tr><td style='text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies2.jpg' alt='' width='300px'>" +
"</td></tr>" +
"<tr colspan='5'>" +
"<td class='centre'><br /><label><br /><span class='cadre'>35kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>30kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>40kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>50kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=1;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>Je&nbsp;ne&nbsp;sais&nbsp;pas</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'></td>" +
"<td class='centre'></td>" +
"</tr>",
 
//##### SERIE 3
"<tr><td style='text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies3.jpg' alt='' width='300px'>" +
"</td></tr>" +
(...)
var klok = new Array(20,20,30,30,30,30,20); /* nbre x 60 */
var tel = -1;
var goed = 0;
var telZ = inpZ = "";
var t0 = 0;
var SD
 
function calc() {
        document.fm.but.value = " Série suivante ";
        if(tel > 6) {
                telZ = "<p class='gauche'><span class='gras rouge cadre majuscule'>Fin du test</span></p>";
                inpZ = "<tr><td></td></tr>";
        }
        else {
                telZ = "<tr><td colspan='7'>Série <span class='gras bleu'>Nunéro " + (tel+1) + "</span> - " + 
                "En reste : <span class='gras bleu'>" + (7 - tel - 1) + "</span></td></tr>";
                inpZ = "<tr><td colspan='7'>Temps pour cette série : <span class='bleu'>" + klok[tel] + " secondes.</span><br />" + 
                "Temps restant : <span class='centre bleu'><input class='centre' type='text' name='rest' id='rest' size=2> secondes</span></td></tr>" +
                        "<tr><td colspan='7'><hr></td></tr>" +
                        "<tr><td class='gauche gras bleu' colspan='7'>Choisissez la force à exercer pour soulever le poids.</td></tr>" +
                        "<tr><td class='gauche' colspan='7'>" + iq[tel] + "</td></tr>" +
                        "<tr><td class='gauche' colspan='7'><hr></td></tr></table>";
                }
                
        document.getElementById('res').innerHTML = "<div class='gauche'><table class='gauche>" +
                                                                                                "<tr><td colspan='7'>" + telZ + 
                                                                                                "</td></tr><tr><td colspan='7'>" + inpZ + 
                                                                                                "</table></div>";
 
(...)

Si ça peut t'aider à résoudre ce problème de BootStrap, ce serait parfait !

A bientôt et merci encore.

**jlb59** · 23/07/2024, 19h50

Je n'en vois trop la nécessité car Domi m'avait donné la ligne à mettre dans le <head>, ça marche sur le téléphone mais il faut jouer avec le zoom de l'écran.

Pour l'instant, ça va et je vais devoir reprendre la taille des fonts.
Je verrai ce que ça donne sur mon téléphone.

Merci pour tout.

Maintenant, je vais voir comment faire un slider ou un carousel pour les 1ères images de la page "accueil.php" et quand ça marchera bien, je mettrai des images plus parlantes parce qu'actuellement, ce n'est que du statut.

J'ai vu le exemple de NoSmoking, qui m'a l'air plutôt bien.
J'ai copier/coller le code mais ça ne marche pas comme l' exemple.

**laurentSc** · 24/07/2024, 00h21

Pour avoir regardé l'effet responsive de ton site avec l'inspecteur, c'est pas encore ça...

Donne le code de menu.php, et je verrai si je peux te le transformer en menu hamburger pour les smartphones. Un exemple de mes sites pour lequel l'effet responsive avec un menu hamburger est correct : https://pasdpanique.fr/

**jlb59** · 26/07/2024, 11h45

Envoyé par laurentSc

Pour avoir regardé l'effet responsive de ton site avec l'inspecteur, c'est pas encore ça...

Donne le code de menu.php, et je verrai si je peux te le transformer en menu hamburger pour les smartphones. Un exemple de mes sites pour lequel l'effet responsive avec un menu hamburger est correct : https://pasdpanique.fr/

Est-ce que tu t'adresses à moi ou à un autre.

Ensuite, j'ai tapé l'adresse que tu as mise, mais sur mon téléphone, c'est inaccessible !

**jlb59** · 24/07/2024, 00h30

Merci, je te donnerai ça demain

**laurentSc** · 24/07/2024, 12h01

Ce matin, je me suis rappelé que je pouvais récupérer le code du menu directement avec l'inspecteur sur le site actuel et voici le menu hamburger : https://codepen.io/laurentsch/pen/bGPpmOP

Bien sûr, pour pas avoir d'erreurs 404, j'ai supprimé les liens

**jlb59** · 24/07/2024, 13h27

Je t'avouerai que je m'y perd entre "responsive" et "Bootstrap".

J'ai eu des réponses où l'un ne disait qu'il fallait faire mon site en Responsive, l'autre faire un Bootstrap, je n'y comprends plus rien.

Oui sur le téléphone, c'est un peu mieux depuis que j'ai rajouté 1 ligne méta dans le head.
Je l'avais pas fait parce que j'avais de la mettre, c'est NoSmoking qui me l'a rappelé.

Maintenant, tu me parles de Responsive, ça ça étre compliqué de tout reprendre dans le site, parce que j'ai déjà eu du mal à faire appel au JS de "Grand test" et "Test De QI", qui sont en JS.

Ensuite, on m'a parlé de Bootstrap et on m'a dit qu'il n'y avait que reprendre mes code, mais où ?
Parce que je n'ai pas vu d'index, de garder, de d'opter, comme j'avais l'habitude de faire.
C'est pour ça que j'en perds mon latin.

Mais comme sur PC, mon site va bien, un peu moins sur les smartphones, je crois que je vais rester comme ça.
Et oui ! Je suis encore de la vieille école puisque j'ai commencé il y a plus 25 ans avec Webexpert , tu vois ça date quand même !

**laurentSc** · 24/07/2024, 13h36

Envoyé par jlb59

j'ai commencé il y a plus 25 ans avec Webexpert , tu vois ça date quand même !

Chu battu car moi, j'ai commencé quelques mois avant de m'inscrire sur DVP, soit y a 18 ans...

Quand tu m'enverras ton site en RAR, je pense regarder et faire la mise au point en local...

**jlb59** · 24/07/2024, 14h00

Envoyé par laurentSc

Quand tu m'enverras ton site en RAR, je pense regarder et faire la mise au point en local...

Je n'ai pas oublié mais je ne suis pas chez moi et je te réponds avec mon téléphone.

Je pense rentrer avant 17h, je fais ça et je te l'envoie.
Mais est-ce que ça va aller avec ce forum ?

**laurentSc** · 24/07/2024, 14h13

Le format zip c'est sûr mais le rar, je sais pas.

Extensions de fichiers valides: 7z as asm asp aspx bz2 c cpp cs css diff doc docx fla gif gz h hpp htm html java jpeg jpg js ods odt pas patch pdf php pl png psd py rar sql swf tar tex txt vb wdc wde wdg wdl wdp wdw xls xlsm xlsx xml xsd xsl xslt zip

**jlb59** · 24/07/2024, 18h52

Ben non, ça marche pas !

je vais essayer un autre moyen mais il me faut une adresse mail !

**jlb59** · 26/07/2024, 10h46

Oui, je m'en doute, mais mais comme je j'ai dit, il n'y a pas que suite2
Ne soit pas si pressé !
De tout manière, j'avais déjà vu sur mon téléphone et j'ai corrigé, ou essayé, de modifier la taille des polices.

Je remets tout ça au propre et je recommence, mais sans doute d'une autre manière

Faire un site pour PC et téléphone/tablette

CSS

Vue hybride

Discussions similaires

Partager

Partager