Formulario no se ve bien en Iphones e Ipads.

[Son_of_Bush]

Tengo el problrema en que algunos inputs de texto, como que cambian de tamano cuando visito la web desde un iphone o un ipad. Aparentemente se crea una diferencia de aproximadamente 15px en algunos de ellos.

El formulario tiene "dos patrones(P) " de diseno.

P1 : label + input text + label + input text
P2 : label + input text

La diferencia ocurre en solo un patron del diseno html.

Estoy usando primero el reset de Meyers.
Luego normalize.
Y por ultimo mi hoja de estilos.

Alguna idea sobre que es lo que esta creando este comportamiento?



http://rinconcitoboricua.com/spna/form1.html

[jalbtercero]

Hola amigo, estas trabajando en porcentajes?

Aun trabajando con porcentajes hay veces que pasa lo mismo, por lo tanto yo utilizo media querys http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[AlbertoBSD]

Hola ya probaste con Bootstrap

bootstrap es un framework para diseñar paginas Resposivas en cualquier dispositivo.

Saludos

[Son_of_Bush]

@jalbtercero : Tienes razon. Intente con pixeles y porcentajes y sigo teniendo el mismo problema. Si estoy usando media queries, para ser mas exacto estoy usando el de esta web: http://stephen.io/mediaqueries/. Pero lo que sucede es, que si arreglo para los iphones, entonces no se ve bien en otros browsers.

Lo que termine haciendo fue detectar el user agent y dependiendo del resultado lo direcciono a otra hoja de estilos. He leido que esta tecnica no es muy buena, pero hasta ahora es la me ha resuelto el problema. Este es el codigo que estoy usando:

Código (php) [Seleccionar] Expandir

<?php  
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
{
print_r ('<link href="css/i-layout.css" rel="stylesheet" type="text/css" />');
}else{
print_r ('<link href="css/layout.css" rel="stylesheet" type="text/css" />');
}
?>

@AlbertoBSD : Voy a probarlo para ver si si resulta mejor que estar redirigiendo.

[Son_of_Bush]

Bueno, el problema al final era uno sencillo. Al parecer el "reset.css" que estaba usando necesitaba de mas instrucciones.

Detecte el problema usando el inspector de Chrome y verificando los valores con la sección de "Computed". Alli encontre que se anadian pixeles extras en el padding.

Para evitar este problema solo tenia que verificar en el "inspector" que el "user agent stylesheet" no estuviese anadiendo valores.