Ecran auto zoom

**hugodu28** · 24/06/2011, 13h28

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, 13h42

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, 14h14

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, 14h37

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, 15h26

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, 16h22

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, 16h36

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, 17h15

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, 17h17

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, 17h50

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, 17h57

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

**hugodu28** · 24/06/2011, 19h34

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>

Ecran auto zoom

Langage PHP

Discussions similaires

Partager

Partager