1485 sujets

Web Mobile et responsive web design

Site dedie pour les mobiles

Bonjour a tous,

Je suis en train de créer ma première version mobile d'un site pour mes clients.

Et je me rends compte, qu'a la partie Contact, quand il y a un formulaire avec des champs input, cela fait un "effet zoom". Quelqu'un pourrait il me dire comment éviter cela svp ?

Et bien sur, j'attends vos critiques constructives sur cette première version mobile.

Lien a entrer sur vos mobiles : www.french-creations.com/mobile/pastis

Merci bien Smiley smile
Salut,

Au niveau du viewport, j'utiliserais :

<meta name="viewport" content="width=device-width, minimum-scale=1.0" />


Ensuite j'intégrerais les paires <label> et <input /> dans un <p> séparément. Et au niveau des tailles j'utiliserais des EM et pas des PX. Ça s'adapte mieux aux écrans de type retina (iPhone 4(s), iPad 3, etc).

Je vois que tu utilises pour tous les champs le type="text", comme tu es en html5 c'est mieux d'utiliser les nouveaux types quand c'est possible (de plus c'est rétro-compatible avec les vieux navigateurs) : le clavier virtuel va s'adapter pour faciliter la saisie (plus d'infos). Smiley smile

Un exemple de tout ça sur mon site avec la page contact.
Modifié par Patidou (04 Aug 2012 - 12:03)
@fanny95 : poste dans la section critique sinon tu vas avoir des cafouillages dans les réponses (2 topics en même temps).

Sinon Patidou a raison, les input type HTML5 c'est plus pratique.
Coucou les amis,

J'ai suivis vos conseils. J'ai essaye d'utiliser au maximum les em et non les px.
J'ai mis le bon meta.
Le probleme, sur la page Contact, ca fait toujours un effet zoom quand je clique dans l'input de mon iphone Smiley decu
Pourquoi? Je ne comprends pas.
Quelqu'un aurait une idee ?

Merciii
Peut-être parce que la taille de la police pour les input est plus petite que la taille du texte. C'est mieux de faire :

input {font-size: 100%;}


À tester… Smiley smile

Attention, tu n'as toujours pas changé les types sur les champs et tu as oublié l'attribut "for" très important. En corrigeant ça donnerait ceci :
	<form action="http://www.french-creations.com/controleur/form.php?site=pastis" method="post">

	            <p><label for="name">Name *</label>
	            <input id="name" name="name" type="text"
	            value=""
	            class="valid" /></p>

	            <p><label for="tel">Contact number *</label>
	            <input id="tel" name="tel" type="tel"
	            value=""
	            class="valid" /></p>

	            <p><label for="email">Email *</label>
	            <input id="email" name="email" type="email"
	            value=""
	            class="valid" /></p>

	            <p><label for="date">Date of the event *</label>
	            <input id="date" name="date" type="date" maxlength="10"
	            value=""
	            class="valid" /></p>

	            <p><label for="purpose">Purpose of the event *</label>
	            <input id="purpose" name="purpose" type="text"
	            value=""
	            class="valid" /></p>

	            <p><label for="number">Number of people *</label>
	            <input id="number" name="number" type="number"
	            value=""
	            class="valid" /></p>

	            <p><label for="message">Other info *</label>
	            <textarea id="message" name="message" type="text"
	            class="valid"></textarea></p>
	
				<!--si le captcha est toujours un nombre type=number-->
				
	        	<p><label for="verif_code">Please enter the code *</label>
	            <input type="number" id="verif_code" name="verif_code"
	            class="valid" />
	            <img src="http://www.french-creations.com/controleur/verif_code_gen.php" id="img-code-confirmation" alt="Code de vérification" width="90" height="32" /></p>

	            <div class="clear"></div>

	            <input type="submit" class="envoyer" value="Envoyer" id="envoyer" name="envoyer" />
		</form>

Modifié par Patidou (12 Aug 2012 - 15:29)
Au cas où tu aurais des craintes : les nouveaux type n'impose pas de modifier ton script php, ça fonctionne directement. Smiley smile
Cerise sur le gâteau : ajouter l'attribut required et aria-required="true" sur les champs onligatoires (voir ma page contact).
Sujet clos
Aller à