Código Html simple para iPhone y Ipod touch

dpbataller · #1 (**permalink**) 31/05/2010, 06:51

Hola! estoy iniciandome en la programación web para dispositivos móviles y tengo un pequeño problema.

Tras subir el simplísimo código HTML y Css de una pequeña prueba para iphone me doy cuenta que ni en el dispositivo móvil ni el portátil aparece como debe aparecer...

Éste el código html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=320, user-scalable=yes">
 
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
<title>Documento sin tÃ*tulo</title>
 
</head>
 
<body>
    
    <div id="header">
        Se ve la cabecera?
    </div>
  
</body>
</html>

y éste el css

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
 
 
@media screen and (max-device-width: 480px){
    
        body{
            background-color:#EFEFEF;
        }
        
        
        #header{
            width:100%;
            height:30px;
            background-color:#333;
        }
}

la URL del site es www.iphonetest.zobyhost.com, comprobar como no se marca el header con el color #eee alguién imagina por que?,está bien el metatag? no se que falla....
GRACIAS!

DiegoRivera2010 · #2 (**permalink**) 31/05/2010, 07:01

Oye no estoy seguro pero depronto el problema no esta en q el #EFEFEF no es un color sugerir que color te gustaria o intenta cambiando el mismo color puedes probar con
Gris=#666666
Negro=#000000
Blanco=#FFFFFF
y Asi Por el estilo espero haberte ayudado
solo cambia

Código CSS:

Ver originalbody{
 
            background-color:#EFEFEF;
 
        }

por

Código CSS:

Ver original#
  body{
 
            background-color:#000000;
 
        }

dpbataller · #3 (**permalink**) 31/05/2010, 13:22

En principio al cambiar esto

@media screen and (max-device-width: 480px){}

funciona... seguiré adelante! Gracias!