Ecran auto zoom

hugodu28 · 24/06/2011, 12h28

bonjour,
j'ai un formulaire qui est destiné à être visualisé sur un iphone en mode paysage.

Il y a très peu de données à voir et en l'état la police est minuscule, et le tableau est grand comme un timbe poste.

Il y a t il un moyen que l'affichage s'autozoom sur la taille de l'écran ???

J'ai cherché en vain dans les sources faqs et tutoriels.

Benjamin Delespierre · 24/06/2011, 12h42

Quelques articles:
- http://www.maxdesign.com.au/articles/liquid/
- http://jontangerine.com/log/2007/09/...youts-with-css

A toi de choisir si tu veux un layout fluide ou élastique.

Ce thread doit être déplacé vers les forums HTML / CSS.

Benjamin Delespierre · 24/06/2011, 13h14

Well, I'm afraid I can't help you with that... I don't make difference actualy between english and french papers on internet. But you could give a try with Google Translate

Sinon, tu peux trouver ton bonheur ici: http://blog.html.it/layoutgala/

hugodu28 · 24/06/2011, 13h37

apparement j' y arriverais pas a moins d'apprendre l'anglais.

Ce que je voudrais c'est un zoom auto quelque soit le procédé.

Pourrais tu me faire le code???? je sais c'est pas les habitudes du site.

Code :

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<?php
session_start();
$cookie_matricule=$_SESSION["cookie_matricule"];
 
$NC=$_SESSION["cookie_NC"];
?>
<form id="form1" name="form1" method="post" action="recape_course.php">
<table border="2"><td>
<?php
$time= date('h:i:s');
echo $time;?></td>
<td> <p>
<input type="submit" name="FS" id="FS" value="Formulaire principal" style="width:200px; height:80px"/>
<?php
if (isset($_POST['FS']))
{
echo'<script>location.href="form_general.php";</script>';
}
?>
 
</td></table>
</form>
<?php
//$cookie_matricule=$_SESSION["cookie_matricule"];
 	//connection au serveur:
  	function connectMaBase(){
	$base = mysql_connect ('10.111.145.45:3306', 'taxibrousse', 'aF1VwKTHLL');
        mysql_select_db ('taxibrousse-taxi', $base) ;
}
        //On se connecte
        connectMabase();
 
    //requête SQL:
    $sql = "SELECT *  FROM courses WHERE pc=0 " ;  	
	//exécution de la requête:
	mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
 // on affiche les résultats 
 $requeteadm=mysql_query($sql);
 
 
    //affichage des données:
	while($result = ($data = mysql_fetch_array($requeteadm)))
	{
	$N=$result['N'];
	$c1=$result['commune1'];
	$c2=$result['commune2'];
	$pc=$result['heurepassage'];
 
	?>
<div align="left">
  <p><a href="recape_course.php?N=<?php echo $N; ?>"><?php echo ("".$N."  ".$c1." -> ".$c2." ".$pc."");?></a>
    <?php
	}
 
  // details course si GET
 
 if (isset($_GET['N'])) {
 
		$N=$_GET['N'];	
		$sqlN = "SELECT *  FROM courses WHERE N=".$N."";
 
	//exécution de la requête:
	mysql_query ($sqlN) or die ('Erreur SQL !'.$sqlN.'<br />'.mysql_error());
        // on affiche les résultats 
       $requeteN=mysql_query($sqlN);
 
	$resultN = mysql_fetch_array($requeteN);
 
	$N=$resultN['N'];
	$c1=$resultN['commune1'];
	$a1=$resultN['adresse1'];
	$c2=$resultN['commune2'];
	$a2=$resultN['adresse2'];
	$nom=$resultN['nom'];
	$tel=$resultN['telephone'];
	?>
 
  </p>
</div>
<table border="2" bgcolor="#CCCCCC">
  <tr><td><?php 
	echo ("<strong>Num.</strong>".$N."")?></td><td> <?php echo("<strong>Nom:</strong>".$nom."")?></td><td><?php echo("<strong>Telephone:</strong>".$tel."")?></td></tr>
    <tr><td><?php echo" <strong>adresse prise en charge:</strong>"?></td></tr>
    <tr><td><?php echo(" ".$a1."")?></td><td><?php echo("<strong>commune:</strong>".$c1."")?></td></tr>
    <tr><td><?php echo "<strong>adresse de destination:</strong>"?></td></tr>
    <tr><td><?php echo("".$a2."")?></td><td><?php echo ("<strong>commune:</strong>".$c2."")?></td></tr>
    </table>
    <p><a href="recape_course.php?A=<?php echo $N; ?>"><?php echo ("Accepter la course".$N."");?></a><br>
     </p>
    <p>
       <?php
 }
  if (isset($_GET['A'])) {
	  $pc='1';
	  $N=$_GET['A'];
 
	  //recherche si N deja pris 
	  $sqlN2 =  "SELECT *  FROM courses WHERE  N=".$N."";
 
	//exécution de la requête:
	mysql_query ($sqlN2) or die ('Erreur SQL !'.$sqlN2.'<br />'.mysql_error());
        // on affiche les résultats 
       $requeteN2=mysql_query($sqlN2);
 
	$resultN2 = mysql_fetch_array($requeteN2);
 
	    $pc=$resultN2['pc'];
	    $N=$resultN2['N'];
 
		if ($pc==0) {
//echo "course libre";
		$time= date('h:i:s');
		$_SESSION["cookie_N"] = $N;
		//modification pc et tpc
	 	$sqlupdate = "UPDATE courses SET pc = '1', tpc=NOW(),cond='".$NC."' WHERE N='".$N."'" ;
 
        //exécution de la requête:
	mysql_query ($sqlupdate) or die ('Erreur SQL !'.$sqlupdate.'<br />'.mysql_error());
 
		//modification trans
	 	$sqlupdate1 = "UPDATE RH SET trans='1', dispo='0' WHERE identifiant = '".$cookie_matricule."'" ;
 
		//exécution de la requête:
	mysql_query ($sqlupdate1) or die ('Erreur SQL !'.$sqlupdate1.'<br />'.mysql_error());
					echo'<script>location.href="suivi_course.php";</script>';
			}
		if ($pc==1) {	 
 
		echo "Cette course a déjà été prise en compte.";
 
		echo"sélectionnez une autre course.";
		}  
  }
  ?>

Benjamin Delespierre · 24/06/2011, 14h26

Citation:

Pourrais tu me faire le code????

Non.

Ce que tu dois faire c'est un layout qui prends 100% de l'écran en largeur, tu gères toutes les dimentions avec des EM pour que la disposition du texte soit identique quel que soit le niveau de zoom et c'est gagné. C'est ce qui est expliqué dans cet article: http://jontangerine.com/log/2007/09/...youts-with-css

Est-ce que quelqu'un à une traduction ou un article similaire en français ?

hugodu28 · 24/06/2011, 15h22

j'ai essayé avec ça et ça ne fonctionne pas

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  {font-size: 100%}>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recapitulatif des courses</title>
 
</head>
 
<body font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; >
<?php

Benjamin Delespierre · 24/06/2011, 15h36

Aïe, tu ne connais pas du tout le CSS ?

Je te déconseille TRES fortement de mettre les styles directement dans le HTML, c'est une mauvaise habitude. De toute façon dans ton exemple, ça ne peut pas marcher car tu n'a pas mis les règles dans l'attribut style comme tu aurais dû.

Voici comment séparer le contenu de l'affichage:

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
  <head>
     <link rel="stylesheet" href="/styles/style.css" media="screen" />
  </head>
  <body>
   ...
  </body>
</html>

Et tu mets tes propriétés d'affichage dans style.css.

Un lien pour t'aider:
- http://fr.wikipedia.org/wiki/Cascading_Style_Sheets

hugodu28 · 24/06/2011, 16h15

j'abandonne.
j'y comprend rien . c'est pas faute d'essayer.
j'ai appris mysql php en deux semaines pour faire un site.
CSS et compagnie j'y arrive pas mon cerveau est en surchauffe.

Merci quand même pour votre aide.

Benjamin Delespierre · 24/06/2011, 16h17

PHP / MySQL c'est autrement plus complexe que HTML / CSS.

'faut dire aussi que tu t'attaque directement a l'écriture d'une feuille de style pour les navigateurs mobiles, on peut pas dire que tu sois allé au plus simpe

Bref, fais-toi un peu les dents avec CSS 2 sur des pages standards et quand tu sera à l'aise, adaptes-les pour les mobiles

hugodu28 · 24/06/2011, 16h50

Comme ça ???

Code :

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="/styles/style.css" media="screen" />
 
<title>formulaire </title>
<style type="text/css">
@media (max-width: 640px)
 {   /* passer tous les éléments de largeur fixe en largeur automatique */ 
 body, element1, element2 {    width: auto !important;    margin: auto !important;    padding: auto !important;  }  
 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */  
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {    max-width: 100% !important;  }  
 /* gestion des mots longs */ 
 textarea, table, td, th, code, pre, samp {    word-wrap: break-word;
 /* césure forcée */ 
 }  code, pre, samp {    white-space: pre-line;
 /* passage à la ligne spécifique pour les éléments à châsse fixe */  }  
 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
  element1, element2 {    float: none !important;    width: auto !important  }  
 /* masquer les éléments superflus */ 
 .hide_mobile {    display: none !important;  }  
 /* Un message personnalisé */ 
 body:before {    content: "Version mobile du site";    display: block;    color: #777;    text-align: center;    font-style: italic;  } } </style>
</head>
 
<body>

Benjamin Delespierre · 24/06/2011, 16h57

C'est l'esprit. Il te faut maintenant l'adapter à ton site.

hugodu28 · 24/06/2011, 18h34

j'ai rentré dans mon code.
sur un ordi , ça garde la même taille.
ça ne prend pas tout l'espace de l'ecran.

Code :

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<?php
session_start();
$cookie_matricule=$_SESSION["cookie_matricule"];
 
$NC=$_SESSION["cookie_NC"];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="/styles/style.css" media="screen" />
 
<title>formulaire recapitulatif</title>
<style type="text/css">
@media (max-width: 640px)
 {   /* passer tous les éléments de largeur fixe en largeur automatique */ 
 body, element1, element2 {    width: auto !important;    margin: auto !important;    padding: auto !important;  }  
 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */  
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {    max-width: 100% !important;  }  
 /* gestion des mots longs */ 
 textarea, table, td, th, code, pre, samp {    word-wrap: break-word;
 /* césure forcée */ 
 }  code, pre, samp {    white-space: pre-line;
 /* passage à la ligne spécifique pour les éléments à châsse fixe */  }  
 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
  element1, element2 {    float: none !important;    width: auto !important  }  
 /* masquer les éléments superflus */ 
 .hide_mobile {    display: none !important;  }  
 /* Un message personnalisé */ 
 body:before {    content: "Version mobile du site";    display: block;    color: #777;    text-align: center;    font-style: italic;  } } </style>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="recape_course.php">
<table border="2"><td>
<?php
$time= date('h:i:s');
echo $time;?></td>
<td> <p>
<input type="submit" name="FS" id="FS" value="Formulaire principal" style="width:200px; height:80px"/>
<?php
if (isset($_POST['FS']))
{
echo'<script>location.href="form_general.php";</script>';
}
?>
 
</td></table>
</form>
 
<?php
//$cookie_matricule=$_SESSION["cookie_matricule"];
 	//connection au serveur:
  	function connectMaBase(){
	$base = mysql_connect ('', 'root', '');
        mysql_select_db ('taxi', $base) ;
}
        //On se connecte
        connectMabase();
 
    //requête SQL:
    $sql = "SELECT *  FROM courses WHERE pc=0 " ;  	
	//exécution de la requête:
	mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
 // on affiche les résultats 
 $requeteadm=mysql_query($sql);
 
 
    //affichage des données:
	while($result = ($data = mysql_fetch_array($requeteadm)))
	{
	$N=$result['N'];
	$c1=$result['commune1'];
	$c2=$result['commune2'];
	$pc=$result['heurepassage'];
 
	?>
<div align="left">
  <p><a href="recape_course.php?N=<?php echo $N; ?>"><?php echo ("".$N."  ".$c1." -> ".$c2." ".$pc."");?></a>
    <?php
	}
 
  // details course si GET
 
 if (isset($_GET['N'])) {
 
		$N=$_GET['N'];	
		$sqlN = "SELECT *  FROM courses WHERE N=".$N."";
 
	//exécution de la requête:
	mysql_query ($sqlN) or die ('Erreur SQL !'.$sqlN.'<br />'.mysql_error());
        // on affiche les résultats 
       $requeteN=mysql_query($sqlN);
 
	$resultN = mysql_fetch_array($requeteN);
 
	$N=$resultN['N'];
	$c1=$resultN['commune1'];
	$a1=$resultN['adresse1'];
	$c2=$resultN['commune2'];
	$a2=$resultN['adresse2'];
	$nom=$resultN['nom'];
	$tel=$resultN['telephone'];
	?>
 
  </p>
</div>
<table  border="2" bgcolor="#CCCCCC">
  <tr><td><?php 
	echo ("<strong>Num.</strong>".$N."")?></td><td> <?php echo("<strong>Nom:</strong>".$nom."")?></td><td><?php echo("<strong>Telephone:</strong>".$tel."")?></td></tr>
    <tr><td><?php echo" <strong>adresse prise en charge:</strong>"?></td></tr>
    <tr><td><?php echo(" ".$a1."")?></td><td><?php echo("<strong>commune:</strong>".$c1."")?></td></tr>
    <tr><td><?php echo "<strong>adresse de destination:</strong>"?></td></tr>
    <tr><td><?php echo("".$a2."")?></td><td><?php echo ("<strong>commune:</strong>".$c2."")?></td></tr>
    </table>
    <p>
<a href="recape_course.php?A=<?php echo $N; ?>"><?php echo ("Accepter la course".$N."");?></a><br>
     </p>
    <p>
       <?php
 }
 
  if (isset($_GET['A'])) {
	  $pc='1';
	  $N=$_GET['A'];
 
	  //recherche si N deja pris 
	  $sqlN2 =  "SELECT *  FROM courses WHERE  N=".$N."";
 
	//exécution de la requête:
	mysql_query ($sqlN2) or die ('Erreur SQL !'.$sqlN2.'<br />'.mysql_error());
        // on affiche les résultats 
       $requeteN2=mysql_query($sqlN2);
 
	$resultN2 = mysql_fetch_array($requeteN2);
 
	    $pc=$resultN2['pc'];
	    $N=$resultN2['N'];
 
		if ($pc==0) {
//echo "course libre";
		$time= date('h:i:s');
		$_SESSION["cookie_N"] = $N;
		//modification pc et tpc
	 	$sqlupdate = "UPDATE courses SET pc = '1', tpc=NOW(),cond='".$NC."' WHERE N='".$N."'" ;
 
        //exécution de la requête:
	mysql_query ($sqlupdate) or die ('Erreur SQL !'.$sqlupdate.'<br />'.mysql_error());
 
		//modification trans
	 	$sqlupdate1 = "UPDATE RH SET trans='1', dispo='0' WHERE identifiant = '".$cookie_matricule."'" ;
 
		//exécution de la requête:
	mysql_query ($sqlupdate1) or die ('Erreur SQL !'.$sqlupdate1.'<br />'.mysql_error());
					echo'<script>location.href="suivi_course.php";</script>';
			}
		if ($pc==1) {	 
 
		echo "Cette course a déjà été prise en compte.";
 
		echo"sélectionnez une autre course.";
		}  
  }
  ?>
</body>
</html>

24/06/2011, 12h28	#1
hugodu28 Membre du Club hugues dupont Pompier Inscription : janvier 2010 Messages : 170 Détails du profil Informations personnelles : Nom : hugues dupont Localisation : France Informations professionnelles : Activité : Pompier Informations forums : Inscription : janvier 2010 Messages : 170 Points : 44 Points : 44	Ecran auto zoom bonjour, j'ai un formulaire qui est destiné à être visualisé sur un iphone en mode paysage. Il y a très peu de données à voir et en l'état la police est minuscule, et le tableau est grand comme un timbe poste. Il y a t il un moyen que l'affichage s'autozoom sur la taille de l'écran ??? J'ai cherché en vain dans les sources faqs et tutoriels.
	00

24/06/2011, 12h42	#2
Benjamin Delespierre Modérateur Benjamin Delespierre Développeur Web Inscription : février 2010 Messages : 2 984 Détails du profil Informations personnelles : Nom : Benjamin Delespierre Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : février 2010 Messages : 2 984 Points : 5 011 Points : 5 011	Quelques articles: - http://www.maxdesign.com.au/articles/liquid/ - http://jontangerine.com/log/2007/09/...youts-with-css A toi de choisir si tu veux un layout fluide ou élastique. Ce thread doit être déplacé vers les forums HTML / CSS. __________________ A la recherche d'un framework MVC facile a prendre en main ? Essayez Axiom Nouveau: la référence d'Axiom est disponible sur GitHub (je la peaufine en ce moment même). Un problème correctement identifié est à moitié résolu, évitez de poster l'intégralité de votre code avec pour seule explication "ça ne marche pas...". Pour identifier correctement vos problèmes PHP, utilisez la gestion des erreurs et xdebug. Les boutons et existent, servez-vous en
	00

24/06/2011, 13h14	#3
Benjamin Delespierre Modérateur Benjamin Delespierre Développeur Web Inscription : février 2010 Messages : 2 984 Détails du profil Informations personnelles : Nom : Benjamin Delespierre Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : février 2010 Messages : 2 984 Points : 5 011 Points : 5 011	Well, I'm afraid I can't help you with that... I don't make difference actualy between english and french papers on internet. But you could give a try with Google Translate Sinon, tu peux trouver ton bonheur ici: http://blog.html.it/layoutgala/ __________________ A la recherche d'un framework MVC facile a prendre en main ? Essayez Axiom Nouveau: la référence d'Axiom est disponible sur GitHub (je la peaufine en ce moment même). Un problème correctement identifié est à moitié résolu, évitez de poster l'intégralité de votre code avec pour seule explication "ça ne marche pas...". Pour identifier correctement vos problèmes PHP, utilisez la gestion des erreurs et xdebug. Les boutons et existent, servez-vous en
	00

24/06/2011, 16h17	#9
Benjamin Delespierre Modérateur Benjamin Delespierre Développeur Web Inscription : février 2010 Messages : 2 984 Détails du profil Informations personnelles : Nom : Benjamin Delespierre Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : février 2010 Messages : 2 984 Points : 5 011 Points : 5 011	PHP / MySQL c'est autrement plus complexe que HTML / CSS. 'faut dire aussi que tu t'attaque directement a l'écriture d'une feuille de style pour les navigateurs mobiles, on peut pas dire que tu sois allé au plus simpe Bref, fais-toi un peu les dents avec CSS 2 sur des pages standards et quand tu sera à l'aise, adaptes-les pour les mobiles __________________ A la recherche d'un framework MVC facile a prendre en main ? Essayez Axiom Nouveau: la référence d'Axiom est disponible sur GitHub (je la peaufine en ce moment même). Un problème correctement identifié est à moitié résolu, évitez de poster l'intégralité de votre code avec pour seule explication "ça ne marche pas...". Pour identifier correctement vos problèmes PHP, utilisez la gestion des erreurs et xdebug. Les boutons et existent, servez-vous en
	00

24/06/2011, 16h57	#11
Benjamin Delespierre Modérateur Benjamin Delespierre Développeur Web Inscription : février 2010 Messages : 2 984 Détails du profil Informations personnelles : Nom : Benjamin Delespierre Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : février 2010 Messages : 2 984 Points : 5 011 Points : 5 011	C'est l'esprit. Il te faut maintenant l'adapter à ton site. __________________ A la recherche d'un framework MVC facile a prendre en main ? Essayez Axiom Nouveau: la référence d'Axiom est disponible sur GitHub (je la peaufine en ce moment même). Un problème correctement identifié est à moitié résolu, évitez de poster l'intégralité de votre code avec pour seule explication "ça ne marche pas...". Pour identifier correctement vos problèmes PHP, utilisez la gestion des erreurs et xdebug. Les boutons et existent, servez-vous en
	00

24/06/2011, 16h15	#8
hugodu28 Membre du Club hugues dupont Pompier Inscription : janvier 2010 Messages : 170 Détails du profil Informations personnelles : Nom : hugues dupont Localisation : France Informations professionnelles : Activité : Pompier Informations forums : Inscription : janvier 2010 Messages : 170 Points : 44 Points : 44	j'abandonne. j'y comprend rien . c'est pas faute d'essayer. j'ai appris mysql php en deux semaines pour faire un site. CSS et compagnie j'y arrive pas mon cerveau est en surchauffe. Merci quand même pour votre aide.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email