Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Dacan en 6 Agosto 2016, 18:51 pm



Título: [Duda] Optimizar website para celulares
Publicado por: Dacan en 6 Agosto 2016, 18:51 pm
Tengo esta web:

http://pfeecalculator.com/ (http://pfeecalculator.com/)

Según he investigado en linea la forma para que vea vía celulares es con la siguiente linea de código:

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

Variando el initial-scale logro posicionarlo bien para un celular pero no existe una herramienta automatica que me haga eso


Título: Re: [Duda] Optimizar website para celulares
Publicado por: engel lex en 6 Agosto 2016, 18:54 pm
estás tratando de meter toda una teoría de visualización de webs en una sola linea de código... y lamentablemente no es tan simple....

necesitas averiguar sobre responsive design... para facilitarte la vida recomiendo estudiar y usar bootstrap


Título: Re: [Duda] Optimizar website para celulares
Publicado por: Dacan en 6 Agosto 2016, 21:41 pm
Muchas gracias le voy a echar un ojo.

Saludos.


Título: Re: [Duda] Optimizar website para celulares
Publicado por: + 1 Oculto(s) en 7 Agosto 2016, 01:25 am
primero checa media querys y luego booststrap saludos...


Título: Re: [Duda] Optimizar website para celulares
Publicado por: 3n31ch en 7 Agosto 2016, 08:33 am
La adaptación a móviles no se realiza mediante una sola linea de código como bien dice angel lex.

Viendo tu sitio logro apreciar que esta hecho en php, inicialmente puedes discriminar desde donde accede un usuario a tu sitio desde el servidor. Puedes facilitar dicho trabajo utilizando "plugins" como Mobile_Detect, (con un simple include ya puedes detectar si se accede desde un móvil, una table, desde iPad, iPhone, etc.) http://mobiledetect.net/ (http://mobiledetect.net/)

Algunos framework ya lo tienen por defecto, como es el caso de cakephp

Por otro lado puedes adaptar tu sitio haciendo uso de media queries como lo menciona rn3w

https://developer.mozilla.org/es/docs/CSS/Media_queries
 (https://developer.mozilla.org/es/docs/CSS/Media_queries)

Con las media queries puedes indicarle al browser por medio de css que cuando la ventana sea de 600px o menor se vea de una u otra forma, (existen muchas posibilidades)

Y como también indicas existe la etiqueta meta viewport, en lo personal no la utilizo ya que me a ocasionado problemas en el pasado, pero tengo entendido que lo han mejorado.

https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag (https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag)


Lo mas importante es que tengas en cuenta que cuando haces una aplicación responsive no tienes porque mostrar toda la información tanto en móvil como en computadora.

En el caso de mucho de mis clientes les he recomendado que la versión movil solo contenga la información de contacto un mapa e información resumida, porque es lo que normalmente buscan desde un móvil en algunos rubros.

Intenta evitar imágenes grandes ya que aun el Internet móvil no es de lo mejor, evita los sliders o carruseles (normalmente el usuario no se queda esperando a ver que pasa después de 5 segundos en la pantalla de inicio)..

Suerte con tus desarrollos y ten en cuenta de que ninguna de las cosas que mencione anteriormente son exclusivas, se utilizan todas.