HTML - compatibilidad web

   
Vista:
Imágen de perfil de fran

compatibilidad web

Publicado por fran (6 intervenciones) el 31/12/2013 08:45:49
Buenos dias, resulta que hice una web y quisiera que se viera bien en los dispositivos moviles y no se que hago mal que no lo consigo;
en el head del html puse:
<link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

y el el css para movil (movil.css) puse:

nav{
width: 500px;
}
p.texto{
color: #000;
}

( los demas css los puse en media="screen")

pero no observo ningun cambio y no se a que se debe; si me podeis ayudar os lo agradeceria; saludos...
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
Imágen de perfil de Jose maria

compatibilidad web

Publicado por Jose maria (12 intervenciones) el 31/12/2013 12:25:03
Hola fran:

De entrada, es ya un clásico insertar en el head:
1
<meta name="viewport" content="width=device-width, initial-scale=1">

Hay documentación abundante para modificar esta etiqueta, pero es, posiblemente, la standar pensando en que la página pueda ser vista por móviles (surgió de iPad pero es aceptada por todos).

Después, en el CSS puedes enlazar según el tamaño de pantalla
1
2
<link rel='stylesheet' media='screen and (max-width: XXXpx) ' href='URL_pequeño.css'>
<link rel='stylesheet' media='screen and (min-width: XXXpx)' href='URL_grande.css'>

o en un único archivo mediante
1
2
3
4
5
6
7
8
9
@media all and (min-width: XXXpx){
/* C&oacute;digo para ventanas con ancho superior a XXXpx */
}
@media all and (min-width: XXXpx) and (max-width: XXXpx){
/* C&oacute;digo para ventanas con ancho entre min-width y max-width*/
}
@media all and (max-width: XXXpx){
/* C&oacute;digo para ventanas con ancho inferior a XXXpx */
}

Y en todo caso, para el que destinas a móviles, trabajar con anchos porcentuales.

Ten en cuenta que en cada @media repetimos todas los estilos con las modificaciones correspondientes a la nueva ventana, pudiendo incluso modificar la maquetación.

Feliz 2014 y suerte
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 xve

compatibilidad web

Publicado por xve (1178 intervenciones) el 31/12/2013 12:31:52
Hola fran, no indica con que iphone lo estas probando, pero por ejemplo con iphone 5 esto me ha funcionado:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (min-device-width: 320px) and (max-device-width: 568px)">
</head>
 
<body>
    <div id="test"></div>
</body>
</html>

style.css
1
2
3
4
5
#test {
    margin:0 auto;
    width:960px;height:500px;
    border:1px solid blue;
}

movil.css
1
2
3
4
#test {
    width:500px;height:500px;
    border:1px solid red;
}

Coméntanos, ok?
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 fran

compatibilidad web

Publicado por fran (6 intervenciones) el 31/12/2013 16:52:55
Hola y muchas gracias por contestar; os comento que lo que he hecho y para no liarme mucho, es enlazar una hoja de estilos para versiones móviles, como xve; pero no se en que debo fallar que no veo cambios...
Estoy utilizando la vista de diseño adaptable de firefox, en este caso de 380x480, y no veo cambios en al web...
Os ponco el codigo aqui para que veais lo que hice a ver si me podeis ayudar:

html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <!--<meta http-equiv="X-UA-Compatible" content="IE=9">-->
  <!-- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">-->
 
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 
 
  <meta charset="utf-8" />
  <title>Entrebastidores</title>
 
    <link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (min-device-width: 320px)and(max-device-width: 480px)" />
 
    <link rel="stylesheet" type="text/css" href="style/in_inicio.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos_nav.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos.css" media="screen" />
</head>

css movil:
1
2
3
4
5
6
7
8
nav{
	width: 400px;
 
}
p.texto{
	color: #000;
	width: 50px;
}

y feliz entrada de año!!!
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 xve

compatibilidad web

Publicado por xve (1178 intervenciones) el 01/01/2014 10:57:32
Hola Fran, creo que con el Responsive design del Firefox no te detectara la hoja de estilo adecuada... creo que únicamente te lo muestra como se vera en un movil, pero no te varia la anchura y altura del dispositivo, que es el valor que revisa para que utilice una u otra hoja de estilos.

Puedes probarlo con un móvil de verdad?

El ejemplo que te puse, con el móvil funciona bien, con el plugin del firefox no.
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 fran

compatibilidad web

Publicado por fran (6 intervenciones) el 01/01/2014 11:31:45
Hola, buenos días y Feliz año; pues si, lo probé en mi Xperia p y no veo cambios ya que por ejemplo probé de poner un texto de otro color y una ancho al menú para poder ver los cambios, pero no lo consigo...
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 xve

compatibilidad web

Publicado por xve (1178 intervenciones) el 01/01/2014 11:58:48
Hola Fran, que modelo de Xperia tienes?
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 fran capel

compatibilidad web

Publicado por fran capel (6 intervenciones) el 01/01/2014 17:25:31
Sony Xperia p
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 xve

compatibilidad web

Publicado por xve (1178 intervenciones) el 02/01/2014 11:02:43
Fran, segun la wiquipedia, la resolución de tu telefono es de: 540x960, por lo que con la resolución que tienes puesta de 320x480 no te funcionara nunca. Prueba a poner la resolución correcta en tu código para probarlo.

http://es.wikipedia.org/wiki/Sony_Xperia_P

Si nos puedes comentar...
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 fran capel

compatibilidad web

Publicado por fran capel (6 intervenciones) el 02/01/2014 12:08:28
hola, puse lo que me dijiste y la verdad que no lo entiendo porque no me surge efecto...mira, te pongo todo el código aqui para que puedas verlo todo mejor:
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
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
<!DOCTYPE html>
<html lang="es">
<head>
  <!--<meta http-equiv="X-UA-Compatible" content="IE=9">-->
  <!-- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">-->
 
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 
 
  <meta charset="utf-8" />
  <title>Entrebastidores</title>
 
    <link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (min-device-width: 540px)and(max-device-width: 960px)" />
 
    <link rel="stylesheet" type="text/css" href="style/in_inicio.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos_nav.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos.css" media="screen" />
    <![if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]>
    <link rel="icon" href="imagenes/favicon.ico" />
    <script src="js/modernizr.js"></script>
    <!--script slider-->
    <script type="text/javascript" src="js/crossfader.js"> </script>
 
    <!-- DECLARO LA LIBRERIA PROTOYPE -->
<script type="text/javascript" src="http://www.paginaswebynnova.com/lib/prototype.js"></script>
<!-- DECLARO EL ARCHIVO CON LA FUNCION EnvioConsulta() -->
<script type="text/javascript" src="http://www.paginaswebynnova.com/lib/js-ynnova.js"></script>
<!-- DECLARO EL ARCHIVO CON LA FUNCION EnvioConsulta() -->
<script type="text/javascript" src="http://www.paginaswebynnova.com/lib/ynnova-contacto2.js"></script>
  <script type="text/javascript" src="fotmulario_modal/_formulario.php"> </script>
    <script type="text/javascript" src="fotmulario_modal/envio-consulta.php"> </script>
 
   <!--ventana emergente-->
    <script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
   </script>
 
   <!--codigo seguimiento analitics-->
   <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-46739709-1', 'entre-bastidores.net');
  ga('send', 'pageview');
 
</script>
 
 
 
   <meta name="author" content="Entrebastidores" />
   <meta name="description" content="Entrebastidores es una empresa destinada a ofrecerle los servicios como bordador en todo tipo de prendas así como confeccionarle su diseño de bordado." />
   <meta name="keywords" content="bordador, bordadora, toallas, pañuelos, baberos, batas, cole, gorras, jerseys, uniformes, trabajos, bordando, picaje, diseño, hilos, entretela, albornoz, mantelería." />
   <meta property="og:image" content="imagenes/logo.png" />
 
</head>
 
 
<body>
       <div id="b_top">
 
      </div>
 
 
  <div id="contenedor">
    <div id="caja">
 
 
    <header>
 
 
 
         <a href="index.html"><img class="logo" src="imagenes/logo.png" width="350" height="150" alt="logo entrebastidores"/></a>
 
          <!--<img class="texto" src="imagenes/texto.png" />-->
          <p class="texto">Realizamos bordados en multitud de prendas, así como elaboramos su diseño</p>
 
 
<!--botones redes-->
       <div class="botones">
        <ul class="menured">
 <li>
  <a class="red1"></a>
  <div>
   <h5>Teléfono</h5>
   <a class="tlf">657498883</a>
   <a href="javascript:void();"></a>
  </div>
 </li>
 <li>
  <a class="red2"></a>
  <div>
   <h5>Contacto</h5>
   <a class="" href="mailto: info@entre-bastidores.net">Email</a>
   <a href="javascript:FondoModal()" onClick="MM_openBrWindow('formulario.html','','width=410,height=400')">Formulario</a>
  </div>
 </li>
 <li>
  <a class="red3"></a>
  <div>
   <h5>En redes</h5>
   <a href="javascript:alert('En breve estará operativa; disculpen las molestias')">Twitter</a>
   <a href="javascript:alert('En breve estará operativa; disculpen las molestias')">Facebook</a>
   <a class="g" href="javascript:alert('En breve estará operativa; disculpen las molestias')">Google+</a>
  </div>
 </li>
 <!--<li>
  <a class="red4"></a>
  <div>
   <h5>Contacto</h5>
   <a href="javascript:void();">eMail</a>
   <a href="javascript:void();">Formulario</a>
   <a href="javascript:void();">Localización</a>
  </div>
 </li>-->
</ul>
</div>
<!------------------>
 
</header>
 
 
       <nav>
 
        <ul>
 
            <li class="navegacion"><a href="index.html">Inicio</a></li>
            <li><a href="empresa.html">Empresa</a></li>
            <li><a href="servicios.html">Servicios</a></li>
            <li><a href="galeria.html">Galería</a></li>
            <li><a href="contacto.html">Contacto</a></li>
 
         </ul>
 
     </nav>
 
 
 
<section>
  <!--script slider-->
 
 <div id="wrapper">
                  <div class="cf_wrapper">
                       <div class="cf_element" id="cf1"><img class="imagen" alt="Bordado" src="imagenes/1.png" height="350" width="750"/> </div>
                       <div class="cf_element" id="cf2"><img class="imagen" alt="Bordado" src="imagenes/2.png" height="350" width="750" /></div>
                       <div class="cf_element" id="cf3"><img class="imagen" alt="Bordado" src="imagenes/3.png" height="350" width="750" /></div>
                       <div class="cf_element" id="cf4"><img class="imagen" alt="Bordado" src="imagenes/4.png" height="350" width="750" /></div>
                       <div class="cf_element" id="cf5"><img class="imagen" alt="Bordado" src="imagenes/5.png" height="350" width="750" /></div>
                       <div class="cf_element" id="cf6"><img class="imagen" alt="bordado" src="imagenes/6.png" height="350" width="750" /></div>
                       <div class="cf_element" id="cf7"><img class="imagen" alt="bordado" src="imagenes/7.png" height="350" width="750" /></div>
 
                   </div>
                   <!--<p>Un mundo por descubrir.</p>-->
               </div>
 
               <!-------------------------------->
        <aside>
          <p>Un mundo por descubrir</p>
        </aside>
 
 
        <aside class="musica">
      <!-- Incluimos sonido -->
        <audio id="demo" autoplay >
          <!-- Colocamos correctamente los 2 tipos de archivo para que si alguno no es compatible con un navegador en concreto lo sea el otro archivo y se pueda reproducir correctamente -->
          <!-- Definimos también el type -->
          <!--<source src="sonidos/musica.mp3" type="audio/mp3" />
          <source src="sonidos/musica.ogg" type="audio/ogg" />-->
        </audio>
 
</aside>
 
</section>
</div>
 
 <div class="clearfooter"></div>
</div>
<footer>
<!--<img class="separador" alt="" src="imagenes/linea_separador.png" height="125" width="500" />-->
 
<!--<div id="pie"><p><a href="index.html">Inicio</a> <a href="empresa.html">Empresa</a> <a href="servicios.html">Servicios</a> <a href="galeria.html">Galería</a> <a href="contacto.html">Contacto</a></p>
  </div>-->
 
<p class="pie">Copyright (c) 2014 Entrebastidores <span>Todos los derechos reservados</span>  <span><a class="legal" href="aviso_legal.html">Aviso Legal</a></span><span><a class="legal" href="politica_privacidad.html">Política de Privacidad</a></span>
<img class="youtube" src="imagenes/i_youtube.png" onmouseover="this.src='imagenes/i_youtube_2.png';" onmouseout="this.src='imagenes/i_youtube.png';" alt="icono youtube"/>
   </p>
 
 
 
  </footer>
 
 
 
 
 
 
 
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4','cf5','cf6','cf7'), 2500, 2500 );
</script>
 
 
 
 
  </body>
 
 
</html>

Y el movil.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html,body{
   width: 100%;
   height: 100%;
}
nav{
	width: 400px;
 
}
p.texto{
	color: #000;
	width: 50px;
}
div.botones{
	display: none;
}
div#contenedor{
	width: 800px;
	height: 100%;
}
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 xve

compatibilidad web

Publicado por xve (1178 intervenciones) el 02/01/2014 13:41:13
Hola Fran, creo que el problema lo tienes en la posición de los estilos...

El ultimo que se cargue, es el que vale, ya que las propiedades se heredan y sobreescriben... prueba a ponerlo así:

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="style/in_inicio.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/estilos_nav.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/estilos.css" media="screen" />
<![if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]>
 
<link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (min-device-width: 540px)and(max-device-width: 960px)" />

Coméntanos, ok?
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 fran

compatibilidad web

Publicado por fran (6 intervenciones) el 02/01/2014 17:18:48
Lo siento, sigue sin funcionar; lo puse asi:
1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="style/in_inicio.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos_nav.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style/estilos.css" media="screen" />
    <![if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]>
<link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (min-device-width: 540px)and(max-device-width: 960px)" />


Te dejo tambien la direccion web para que lo puedas comprobar tu mismo:
http://www.entre-bastidores.net
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