JavaScript - Escalar, adaptar una web segun el tamaño de pantalla

 
Vista:

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por Sam (106 intervenciones) el 18/08/2014 09:51:26
Hola amigos, les cuento:

Tengo una pagina web que se ve bien en todos los tamaños de pantalla de ordenadores fijos de mesa.

Ya que es una pagina que no esta enfocada para su uso en tablets o moviles precisamente,

Hasta aquí todo bien, lo que pasa es que, teniendo la web ya hecha, ahora el cliente se le ha metido en la cabeza que quiere que se vea bien en tablets y moviles.

Pero claro la maquetacion, el css etc esta ya todo hecho.

Mi pregunta es si existe algun codigo jquery o javascript, no se, que escale la web, no que recoloque los elementos de la web, sino que escale la web entera ajustandose al tamaño de pantalla, este esta vertical o apaisada.

Con eso ya seria feliz, lo digo por que estoy buscando ya dos dias y encuentro codigos que no me terminan de funcionar del todo.

Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por Sam (106 intervenciones) el 19/08/2014 12:10:00
Acabo de encontrar codigo javascript que he modificado para adaptarlo al problema que tengo y este es el resultado:


Primero para centrar el div que contiene toda la pagina:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
 
    $(document).ready(function(){
 
         $(window).resize(function(){
 
              // aquí le pasamos la clase o id de nuestro div a centrar (en este caso "cont_escalable")
              $('#cont_escalable').css({
                   position:'absolute',
                   left: ($(window).width() - $('#cont_escalable').outerWidth())/2
              });
 
        });
 
    // Ejecutamos la función
    $(window).resize();
 
    });
 
</script>


Despues el codigo que cambia de zoom segun el ancho del navegador:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
 
    window.addEventListener("orientationchange", function() {
 
        // Hacer algo cuando cambia la orientación
        if(window.screen.availWidth == 1680)window.parent.document.body.style.zoom="100%";
        if(window.screen.availWidth == 1280)window.parent.document.body.style.zoom="100%";
        if(window.screen.availWidth == 1024)window.parent.document.body.style.zoom="100%";
        if(window.screen.availWidth == 800)window.parent.document.body.style.zoom="100%";
        if(window.screen.availWidth == 768)window.parent.document.body.style.zoom="90%";
        if(window.screen.availWidth == 600)window.parent.document.body.style.zoom="52%";
        if(window.screen.availWidth == 480)window.parent.document.body.style.zoom="30%";
        if(window.screen.availWidth <= 320)window.parent.document.body.style.zoom="25%";
 
        //alert(window.orientation);
        }, false);
 
</script>


En un ordenador fijo se ve bien, ya sea una pantalla de 1024px, 1680px o mas.


Pero cuando se trata de tablets se ve regular, yo tengo una de 1024px por 600px,

Con android en ocasiones se ajusta en vertical y horizontal correctamente y en otras ocasiones sale mas grande del tamaño de pantalla.

Y no se por que sucede esto, es como si a veces detectara el codigo y otras no.


Con firefox lo que sucede es que se ve bien en una tablet de ancho 1024px pero mas grande que la pantalla cuando lo pongo la pantalla en vertical con 600 px de ancho.


Con google crome la web me sale muy grande mas que el tamaño de pantalla, tanto en horizontal como en vertical.



¿Que le falta al codigo para que se detecte correctamente, tanto en horizontal como en vertical, en cualquier navegador de la tablet?


la web es:

http://www.desarrollosformativos.com/



Como digo, mi impresion es que en ocasiones detecta el codigo y otras no debido al navegador usado en ese momento y al giro de 90 grados que se le de al movil o tablet. que es lo que hace que a veces detecte el codigo y otras no.

Y claro ese es el problema que debe detertarse el codigo segun el navegador o el giro.

Gracias de antemano a todos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por txema (18 intervenciones) el 20/08/2014 00:37:12
Hola Sam:

El tema que planeas es, actualmente, el planteamiento de todos los diseños actuales. Lo que te pide tu cliente es lo que todos queremos y pretendemos hacer.

La magia de javascript o de jQuery no existe. Se trata de CSS vs estilos (que en algún modo planteas con jQuery para modificarlos pero con soluciones deficientes). Estamos obligados a ser artesanos.

Plantéate el diseño adaptativo (responsive design).

Posiblemente sea útil todo tu HTML (PHP incluido) pero tendrás que trabajar a full el CSS. ¿Cómo?: básicamente:
1
2
3
4
5
6
7
8
9
10
@media all and (min-width: 980px){
/* estilos para pantalla de 1024 px*/
}
@media all and (min-width: 769px) and (max-width: 979px){
/* estilos para pantalla entre estas dimensiones (considerando en no llegar a la barra de desplazamiento horizontal*/
}
/* Hasta llegar a */
@media all and (max-width: 480px){
/* Se supone que es el tamaño del smartphone en vertical, o tal vez 320px que corresponden al formato mínimo horizontal. Pero a estas alturas todo es porcentual. */
}
No te asustes. Casi todo se repite pero hay que cuidar los anchos y, en tamaños reducidos, la estructura (lo que iba en horizontal, ahora habrá de ubicarlo uno debajo de otro.

Una cita que, en este contexto es genérica:

"Las webs para móviles van a dejar de existir.

El que no quiera darse cuenta de ello es que está cerrando los ojos. Hace ya muchos años, las webs diseñadas expresamente para móviles fueron toda una novedad, pero con la llegada del diseño web adaptable, todo cambió.

¿Quién no quiere o quién no tiene a día de hoy una página web totalmente responsive, que sea adaptable a móviles y tabletas?

El diseñar dos páginas webs en vez de una con una estructura adaptable a día de hoy es una total pérdida de tiempo y una práctica totalmente en desuso. De hecho, el 90% de las webs que diseñamos durante el pasado 2013 fueron responsives. Sólo un 10% de nuestros clientes nos solicitaron páginas webs no adaptables."
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por Sam (106 intervenciones) el 20/08/2014 08:52:39
Txema, gracias por contestar, te comento:

Cuando este cliente llego a mi para que le hiciera una pagina web, resulta que dicha web debe estar enfocada a hacer cursos de manera online, con ello quiere decir que debes elegir el curso y estudiarte el temario con el contenido de cada tema del curso desde la misma web, y no son precisamente dos lineas de texto, estamos hablando de contenido de temas para estudiar y posteriormente examinarse haciendo un tipo test, tambien desde la web.


El asunto es que desde el primer momento me di cuenta que esta pagina nadie la iba a usar para este menester desde un movil, y si me apuras ni si quiera desde una tablet de manera tactil, y mucho menos nadie se iba a estudiar el temario de un curso desde una pantalla tan pequeña como la de un movil. A no ser con una lupa.


Asi que por ello descarte el responsive design para moviles y tablets y me comprometi con el cliente a que, si , se veria correctamente en todo tipo de tamaños de pantallas, pero ojo, de ordenadores fijos de sobremesa.


Y esto ultimo si se ve correctamente, incluidos pantallas de portatiles.


Bien dicho esto, pasado el tiempo y estado ya su web ya toda practicamente hecha, ahora me viene diciendo que como a un amigo suyo, otras personas le estan haciendo a ese amigo una web "responsive design", pues que el quiere lo mismo.

Decir que a su amigo, si, que necesita que su web se vea bien en moviles y tablets , por la naturaleza de su proyecto, si, es obligatorio que se vea bien en estos dispositivos.


Pero en la de mi cliente lo veo absurdo, ningun cliente en su sano juicio hara uso de su web para estudiar nada.


Por eso estoy apañado o intentando apañar algo con javascript y /o jquery + css



Nota: decir que no creo que haya que saber programacion o diseño para que si quieres que tu web se vea en moviles y tablets me lo hubiera dicho desde el principio y no me lo dijo.

Yo opte por lo que creia mas sensato y practico.



Tu que opinas de todo esto? , que me aconsejas txema?, me ayudaria mucho que me aconsejaras algo sobre que rumbo tomar, es que aplicar css ahora es muyyyyyy tedioso aplicarselo a toda la web que son un monton de paginas y encima gratis :-(

la web es esta:

www.desarrollosformativos.com
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por txema (18 intervenciones) el 20/08/2014 11:46:38
Cabe deducir que corresponde a ese 10 % que no merece la pena pasarla a responsive.

Y muchas veces es difícil convencer al cliente, sobre todo cuando ha visto realizado su trabajo y quiere más, aunque sea innecesario.

Como te decía anteriormente, las soluciones de adaptación de estilos a través de javascript no me gustan excepto que sean estrictamente necesarias o sean consecuencia de la ejecución de funciones.

Aparentemente el código al que haces referencia haría eso: mostrarle la página de forma diminuta .
La única observación sería el cambiar los == por >= (excepto el úlñtimo) y los if (excepto el primero) por else if para que tome la ventana mayor posible.

No es fácil decirle que no al cliente. Tal vez (se me ocurre) haciéndole una muestra de un tema o un curso y mostrándole que no es práctico el resultado para su web. O enfrentarte a él con un nuevo proyecto de horas de trabajo que tendrás que sumar al desarrollo de la web y tienen su merecido costo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Escalar, adaptar una web segun el tamaño de pantalla

Publicado por sam (106 intervenciones) el 20/08/2014 20:05:58
Muchas gracias por aclararme las ideas :-)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 2
Ha aumentado su posición en 9 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

no puedo adaptar mi formulario a diferentes resoluciones de pantalla

Publicado por luis eduardo (1 intervención) el 09/04/2019 01:56:37
hola, necesito ayuda para adaptar mi formulario a diferentes resoluciones de pantalla...

mi html.

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
<!DOCTYPE html>
<html lang="en" id="forteam" class>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
	<title>ForTeam - Inicia sesión o registrate</title>
	<link rel="shortcut icon"  type="image/png" href="C:\Users\DIEGO\Desktop\Comienzo ForTeam\img\Imagen.png">
	<link rel="stylesheet" type="text/css" href="css/forteam2.css">
<STYLE>
.idiomas{
	width: 200px;
	height: 30px;
	float: right;
	margin: 12px 190px;
}
 
.lenguajes{
	width: 120px;
	margin: 5px 50px;
	color: #fff;
	text-align: center;
	list-style: none;
	font-size: 14px;
}
.ul, li{
	list-style: none;
	color: #fff;
}
.lenguaje li a{
	background-color: #34495E;
	color: #fff;
	text-decoration: none;
	padding: 5px 10px;
	display: block;
}
.lenguaje li a:hover{
	background-color: #34495E;
}
.lenguaje li ul{
	display: none;
	position: absolute;
	min-width: 140px;
}
.lenguaje li:hover > ul{
	display: block;
}
</STYLE>
</head>
<body>
	<header>
      <div id="header">
        <div id="logo">
        <a href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam2.html">
        <img src="C:\Users\DIEGO\Desktop\Comienzo ForTeam\img\Imagen01.png"
        width="300" height="100"></a>
        </div>
 
            <div class="formulario">
                  <form action="">
                        <input type="text" placeholder="Usuario o correo electronico" required>
                        <input type="password" placeholder="Contraseña" required>
                        <input href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam.html" type="submit" value="Iniciar Sesión">
                  </form>
            </div>
 
              <div class="idiomas">
              <div class="lenguaje">
                <li>
                <a href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam2.html">
                <img src="img/españa.jpg" height="15" width="25">
                <b>ESPAÑOL</b>
                </a>
                      <ul>
                        <li><a href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam10.html">
                          <img src="img/inglaterra.jpg" height="15" width="25">
                          <b>ENGLISH</b></a>
                        </li>
                        <li>
                        <a href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam11.html">
                        <img src="img/italia.jpg" height="15" width="25">
                        <b>ITALY</b></a>
                        </li>
                        <li>
                        <a href="file:///C:/Users/DIEGO/Desktop/Comienzo%20ForTeam/forteam12.html">
                        <img src="img/francia.jpg" height="15" width="25">
                        <b>FRANCAIS</b></a>
                        </li>
                    </ul>
                </li>
      </div>
    </header>
    <div id="general">
        <div id="novedades">
            <center>
                <p>Aqui encontraras los mejores juegos jugados en los ultimos años,
                para acceder solo necesitas las siguientes recomendaciones:</p>
            </center>
 
            <center><h1>1.- Registrate</h1><center>
            <center><h1>2.- Inicia Sesión</h1><center>
            <center><h1>3.- Busca el juego que deseas jugar</h1><center>
            <center><h1>4.- Descargarlo y Disfrutalo</h1><center><br>
 
            <center><img src="C:\Users\DIEGO\Desktop\Comienzo ForTeam\img\juegos.jpg" width="350" height="200"></li>
            <center><br><h4>RECUERDA HACER EL BIEN Y NO EL MAL, TE LO DESEA...</h4>
            <center><img src="C:\Users\DIEGO\Desktop\Comienzo ForTeam\img\imagen1.png" width="250" height="150"></li>
        </div>
 
        <div id="ofertas">
            <div class="contenedor-form">
                <div class="registro">
                    <h2>Crea una cuenta</h2>
                    <form action="">
                        <input type="text" class="nombre" placeholder="Nombre" required>
                        <input type="text" class="apellido" placeholder="Apellido" required>
                        <input type="usuario" class="usuario" placeholder="Usuario o correo electronico" required>
                        <input type="password" class="password" placeholder="Contraseña nueva" required>
                        <input type="submit" value="Registrarse" class="enviar">
                    </form>
                </div>
            </div>
        </div>
 
        <div class="reset-password">
            <div class="resetear">
                <a href="#" style="text-decoration:none">
                <h3>¿Olvide mi contraseña?</h3></a>
            </div>
        </div>
</body>
</html>



código css.

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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 
body{
		background: url(../img/bg2.jpg);
		background-size: cover;
		background-attachment: fixed;
		font-family: 'Roboto', Arial, sans-serif, verdana;
		width: 100%;
		height: auto;
}
 
header{
	position: fixed;
	width: 100%;
	height: 9%;
	top: 0;
	left: 0;
 
	padding: 20px;
	background: #34495E;
}
 
#header #logo{
	position: fixed;
	width: 30%;
  margin: -18px 410px;
}
 
/* secciones de las 2 divisiones del body*/
 
div#general{
	margin: auto;
	margin-top: 120px;
	width: 1000px;
	height: auto;
}
/*contenido de forteam*/
 
div#novedades{
	float: left;
	width: 500px;
	height: auto;
	margin: 5px auto;
	color: #000;
	text-align: justify;
	font-family: 'Roboto';
	font-size: 16px;
}
p{
	width: 480px;
	font-size: 25px;
	text-align: center;
}
b{
	font-size: 18px;
	margin: -3px 5px;
}
h1{
	font-size: 22px;
	margin-top: 7px;
	color: #000;
}
h4{
	width: 400px;
	font-size: 26px;
}
/*formulario*/
 
div#ofertas{
	float: right;
	width: 470px;
	height: auto;
	margin: 5px -65px;
}
.contenedor-form {
    width: 420px;
		height: auto;
	  margin: 48px 30px;
    border-radius: 5px;
    color: #fff;
}
.registro {
    background: rgba(0,0,0,.5);
    width: 365px;
		height: 300px;
	  margin: 10px 15px;
    border-radius: 5px;
    color: #fff;
		/*padding: 40px;*/
}
.registro h2 {
		width: 365px;
		height: auto;
		text-align: center;
		font-size: 25px;
		line-height: 36pt;
		color: white;
}
.contenedor-form input[type="text"]{
	width: 160px;
	height: 40px;
	margin: 5px 10px;
	padding: 5px 5px;
	border-radius: 5px;
	border: 2px solid white;
	background: white;
	font-family: 'Roboto', Arial, verdana;
	font-size: 16px;
	color: black;
}
.contenedor-form input[type="text"]::before{
	background: white;
}
.contenedor-form input[type="usuario"]{
	width: 345px;
	height: 40px;
	margin: 10px 10px;
	padding: 5px 5px;
	border-radius: 5px;
	border: 2px solid white;
	background: white;
	font-family: 'Roboto', Arial, verdana;
	font-size: 16px;
	color: black;
}
.contenedor-form input[type="password"]{
	width: 345px;
	height: 40px;
	margin: 10px 10px;
	padding: 5px 5px;
	border-radius: 5px;
	border: 2px solid white;
	background: white;
	font-family: 'Roboto', Arial, verdana;
	font-size: 16px;
	color: black;
}
.contenedor-form input[type="submit"] {
    background: #FF851B;
    color: #FFF;
    width: 40%;
    border: none;
    padding: 10px 0;
    font-size: 18px;
		border-radius: 7px;
		margin: 3px 120px;
    font-weight: normal;
    font-family: 'Roboto';
    letter-spacing: 1px;
    cursor: pointer;
}
 
.contenedor-form input[type="submit"]:hover {
    background: rgba(0, 117, 217, 0.7);
}
.reset-password{
    width: 365px;
		height: 40px;
		background: blue;
		position: absolute;
    padding: 10px 0;
		font-size: 15px;
		margin: 335px 640px;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.resetear{
	width: 180px;
	height: 25px;
	margin: 23px 98px;
}
.resetear h3{
	width: 200px;
	color: white;
	font-size: 15px;
	line-height: 20pt;
	margin: -25px -10px;
}
.reset-password h3:hover{
	text-decoration: underline;
	visibility: visible;
	cursor: pointer;
}
 
/*contenido para el inicio de sesión*/
.formulario{
	width: 520px;
	height: 40px;
	margin: 6px 980px;
	position: fixed;
 
}
.formulario form{
	width: 500px;
	height: 35px;
	margin: 2px auto;
	line-height: 20pt;
}
.formulario input{
	height: 25px;
	padding: 2px 5px;
	margin: 5px 3px;
}
 
.formulario input [type="submit"]{
	background: #F5F5F5;
	border: 2px solid #F5F5F5;
	color: black;
}
 
.formulario input[type="submit"]:hover {
    background: #F5F5F5;
		border: 2px solid #F5F5F5;
		color: black;
		cursor: pointer;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de santi
Val: 30
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

no puedo adaptar mi formulario a diferentes resoluciones de pantalla

Publicado por santi (12 intervenciones) el 09/04/2019 02:07:08
Hola,

a nivel general, prueba cambiando la anchura al 100%:

1
width: 100%;

De esta forma no ocupará más que la pantalla..

Pero esto debes hacerlo con los componentes "padre": general, novedades, etc.

Prueba y comentas ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar