Jump to content

Hacer Versión Movil Como Si Fuera Versión Escritorio


Recommended Posts

Hola buenas tardes comunidad, os digo otra cosa que me está rompiendo mas la cabeza... en mi anterior tienda, ( Ahora si que valoro el pedazo trabajo que me hizo un compañero ) la versión movil de versión escritorio, era expectacular, porque se veia igual que la versión de pc y sin ningun descuadre y demás.

 

La tienda antigua:

 

www.Informaticaelec.com

 

Y la verdad se vé muy muy bien y me gustaría dejar la versión que tengo actualmente igual que esa.

 

La nueva tienda:

 

www.informaticaelecvip.com/prestashop

 

Y la versión desde movil, seleccionando la versión completa ( De escritorio )

 

Se ve muchísimas cosas descuadradas.... :( :( :(

 

Por donde podría empezar?

 

Gracias a todos chicos de veras

Link to comment
Share on other sites

Hola buenas tardes comunidad, os digo otra cosa que me está rompiendo mas la cabeza... en mi anterior tienda, ( Ahora si que valoro el pedazo trabajo que me hizo un compañero ) la versión movil de versión escritorio, era expectacular, porque se veia igual que la versión de pc y sin ningun descuadre y demás.

 

La tienda antigua:

 

www.Informaticaelec.com

 

Y la verdad se vé muy muy bien y me gustaría dejar la versión que tengo actualmente igual que esa.

 

La nueva tienda:

 

www.informaticaelecvip.com/prestashop

 

Y la versión desde movil, seleccionando la versión completa ( De escritorio )

 

Se ve muchísimas cosas descuadradas.... :( :( :(

 

Por donde podría empezar?

 

Gracias a todos chicos de veras

Link to comment
Share on other sites

:( :( :(

 

Alguna recomendación o guía para empezar con todas las modificaciones?

 

 os lo agradecería muchísimo comunidad

 

Saludos

Yo el sistema que utilizo es muy simple.

 

Lo ideal es disponer de un telefono android y tenerlo configurado para desarrollar.

Lo conectas al ordenador y desde chrome puedes utilizar las devtools sobre las paginas que tienes abiertas en el telefono.

(mas info: https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=es )

 

Entonces mi sistema es simplemente empezar cosa por cosa que queda descuadrada, modificar el css mediante devtools para que quede cuadrado y una vez lo tengo bien, modificar el archivo que sea necesario (en el devtoools te indica archivo y linea, así que es fácil de encontrar)

 

Así detalle por detalle.

Es un trabajo lento y minucioso, pero no hay otra manera.

Evidentemente se requieren unos conocimientos básicos de css.

  • Like 1
Link to comment
Share on other sites

Yo el sistema que utilizo es muy simple.

 

Lo ideal es disponer de un telefono android y tenerlo configurado para desarrollar.

Lo conectas al ordenador y desde chrome puedes utilizar las devtools sobre las paginas que tienes abiertas en el telefono.

(mas info: https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=es )

 

Entonces mi sistema es simplemente empezar cosa por cosa que queda descuadrada, modificar el css mediante devtools para que quede cuadrado y una vez lo tengo bien, modificar el archivo que sea necesario (en el devtoools te indica archivo y linea, así que es fácil de encontrar)

 

Así detalle por detalle.

Es un trabajo lento y minucioso, pero no hay otra manera.

Evidentemente se requieren unos conocimientos básicos de css.

 

Buenos días compañero, probaré a ver que se puede hacer de esta manera, me esperaba mas oir, coge los css antiguos del tema movil de escritorio y vas haciendo cambios en la otra tienda, pero bueno... a ver si recibo algo mas de ayuda... :(

 

Gracias

Link to comment
Share on other sites

También existen algunos emuladores de móviles con utilerias similares al firebug de firefox, aunque no siempre lucen 100% igual al verdadero móvil, pero te ahorran mucho trabajo, supongo que la opción que te da JoanCasas es muy interesante, en lo personal es nuevo para mi y me gustaría hacer pruebas con ello.

Link to comment
Share on other sites

Opino... veo que el tema de la versión de escritorio es responsive, pero le has metido mano al código sin tener eso en cuenta y has descuadrado todo.

 

Al meter partes de código de la otra web has modificado comportamientos (max-width) que se dan al visualizar la web en la pantalla de un dispositivo móvil (tablet o smartphone) y por eso lo ves mal en los mencionados.

 

Esa es mi apreciación... a ver si otros "foristas" lo ven igual que servidor.

Link to comment
Share on other sites

Prueba eliminar, en tu fichero:

/themes/plantilla/header.tpl

Esto:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

Y comprueba si ya no se te ve forma responsible, pues entiendo que quieres que no sea responsible tu plantilla, que actualmente si lo es. xD

Edited by Feliz Garcia (see edit history)
  • Like 1
Link to comment
Share on other sites

Prueba eliminar, en tu fichero:

/themes/plantilla/header.tpl

Esto:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

Y comprueba si ya no se te ve forma responsible, pues entiendo que quieres que no sea responsible tu plantilla, que actualmente si lo es. xD

 

Mi idea es que se quede centrado como una versión normal de pc, te explico, yo desde la tablet, resolución 1366x768 veo la tienda perfectamente, es decir, completamente cuadrados todos los bloques y ordenador como si fuera una versión de PC, pero desde mi telefono movil no, tengo un galaxy note 3 con resolución 1920x1080 y alomejor... creo que puede ser la razón... Aunque desde un Note 2 tambien hace lo mismo y su resolución es 1280x720 .... a si que no lo entiendo, si desde el movil te metes a la tienda:

 

www.informaticaelecvip.com/prestashop

 

Verás como se descuadra todo... :(

 

Y sin embargo en mi antigua tienda... se queda todo cuadrado y ordenado como si estuvieras navegando desde un pc... :(

 

A ver si me puedes iluminar un poco Feliz García....

 

Muchísimas Muchísimas Gracias compañero de veras

Link to comment
Share on other sites

El tema es que no quieres que sea responsive verdad? La plantilla sí lo es, entonces tienes que quitar el css con media queries , seguramente lo tienes todo en  el fichero responsive.css. A malas entras dentro y comentas todo el código con /* */.

 

 

Lo ideal seria arreglar los fallos para que hacen que la plantilla sea responsive de verdad..(modificaciones tuyas..etc) pero eso puede ser complicado, la opción de quitar el responsive por lo menos deja que la web se vea igual (pero mas pequeña claro..) en smartphones con altas resoluciones y haciendo zoom es funcional.

  • Like 1
Link to comment
Share on other sites

El tema es que no quieres que sea responsive verdad? La plantilla sí lo es, entonces tienes que quitar el css con media queries , seguramente lo tienes todo en  el fichero responsive.css. A malas entras dentro y comentas todo el código con /* */.

 

 

Lo ideal seria arreglar los fallos para que hacen que la plantilla sea responsive de verdad..(modificaciones tuyas..etc) pero eso puede ser complicado, la opción de quitar el responsive por lo menos deja que la web se vea igual (pero mas pequeña claro..) en smartphones con altas resoluciones y haciendo zoom es funcional.

 

Buenos días compañero,  que bien que encuentre una respuesta con un poquito de esperanza para poder arreglar todo esto, no se que es responsive, pero me imagino que será algo que hará descuadrar todo.

 

Voy a ver el fichero que me comentas y hacer eso que me comentas, a ver si veo algún cambio.

 

La cuestión es, es que en mi otra tienda:

 

www.informaticaelec.com

 

Sale todo " Perfecto " me tocó un amiguete ciertas cosas y lo dejó... chapó y se ve todo perfectamente, como si fuera en un pc pero en un smartphone.

 

Gracias Enrique compañero, a ver si damos con la solución y puedo seguir avanzando un poquito mas... :(

 

Saludos

Link to comment
Share on other sites

no se que es responsive, pero me imagino que será algo que hará descuadrar todo.

Responsible quiere decir entre otras cosas, que se adapta a las distintas resoluciones en las que estes viendo la web, segun la resolución donde estes se vera de un modo mas reducido o menos reducido, y por eso se hacen cambios en el css, segun resoluciones.

Edited by Feliz Garcia (see edit history)
  • Like 1
Link to comment
Share on other sites

Responsible quiere decir entre otras cosas, que se adapta a las distintas resoluciones en las que estes viendo la web, segun la resolución donde estes se vera de un modo mas reducido o menos reducido, y por eso se hacen cambios en el css, segun resoluciones.

 

Gracias compañero, ahora ya se el significado de otra cosa mas :)

 

Voy a buscar el archivo para intentar que no haga cambios en ningun smartphone ni tablets, a ver si doy con el archivo

 

Gracias Gracias Y Mas Gracias

Link to comment
Share on other sites

Gracias compañero, ahora ya se el significado de otra cosa mas :)

 

Voy a buscar el archivo para intentar que no haga cambios en ningun smartphone ni tablets, a ver si doy con el archivo

 

Gracias Gracias Y Mas Gracias

 

Como te dijo Enrique Gomez, el fichero, parece este:

http://informaticaelecvip.com/prestashop/themes/PRS040090/css/megnor/responsive.css

(Prueba vaciarlo a modo de prueba, o comentarlo como dice Enrique) (En todo caso, no se te olvide guardar una copia de seguridad del fichero)

 

De todos modos ¿No sera mejor preparar la web para las distintas resoluciones?

  • Like 1
Link to comment
Share on other sites

Como te dijo Enrique Gomez, el fichero, parece este:

http://informaticaelecvip.com/prestashop/themes/PRS040090/css/megnor/responsive.css

(Prueba vaciarlo a modo de prueba, o comentarlo como dice Enrique) (En todo caso, no se te olvide guardar una copia de seguridad del fichero)

 

De todos modos ¿No sera mejor preparar la web para las distintas resoluciones?

 

Si gracias compañero, lo probaré ahora mismo a vaciarlo, la cuestión es compañero, que no tengo los suficientes conocimientos y tambien no quiero molestar mas, ya que ultimamente... estoy muy molestón aquí en la comunidad... :(

 

Y como no se hacerlo... ni me lo propongo :(

 

Gracias a los 2 compañeros, pruebo eso y os digo ahora mismo, no tengo ni idea como estará la otra tienda, voy a fijarme en ese archivo en concreto a ver como sale en la otra tienda.

 

Saludos chicos

Link to comment
Share on other sites

Buenos chicos, parece ser que todo funciona :D que contento estoy, lo que no se ve igual es el azul degradado que está arriba del todo con el logo, solo se ve en la parte del logo, es el único pero que puedo poner, pero el resto está genial :)

 

Al hacer el footer un poco mas ancho, no termina de cuadrarse el menú de los productos ni las barras de arriba las azules, pero bueno... ya el día de mañana espero poder pagar a alguien para que me haga un tema movil en condiciones.

 

Muchísimas Muchísimas Gracias A Ambos, me habeis ayudado muchísimo :)

 

Saludos

Link to comment
Share on other sites

  • 2 weeks later...

comprueba en el global.css si tienes lineas englobadas bajo algo así:

@media only screen and (max-width: 767px) {

Este ejemplo provoca que cuando la pantalla sea menor de 767px actue ese CSS, eliminalos todos y actuará siempre el mismo CSS danto igual cual es la resolución o desde donde lo veas.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...