Comentario: El editor de este artículo le presentará cómo usar HTML5 para lograr el soporte de sitios web en Windows 8. Si lo necesita, consultelo.
Primero, aprendamos sobre el soporte de Windows 8. Las aplicaciones de Metro en Windows 8 pueden dividir muy bien la pantalla. La siguiente figura
Esto permite a los usuarios cambiar muy fácilmente durante el uso. El sistema también tiene regulaciones rígidas sobre la fijación. Como máximo, dos pantallas, una es grande y la otra es pequeña. Y el ancho de la pantalla pequeña se fija en 320 píxeles.
Entonces, cuando los usuarios publican el sitio web en una pantalla pequeña, la página se reduce en proporción de forma predeterminada. Como se muestra en la figura a continuación:
Entonces, ¿cómo podemos resolver ese problema muy bien? ¿Qué hay de hacer que el sitio web muestre un efecto muy amigable en la pequeña pantalla de Windows 8? A continuación tengo un ejemplo simple
Como se muestra en la imagen, una página muy simple y tradicional, que incluye navegación, contenido, etc. horizontalmente, etc.
Y lo mismo es cierto para el código tradicional
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
<estilo>
.nav {
relleno: 5px 0px 5px 0px;
margen: 0px;
Ancho: 100%;
Tipo de estilo de lista: Ninguno;
Color de fondo: #CDDCD6;
Altura: 28px;
}
.nav li {
margen: 0px 1px 0px 0px;
flotante: izquierda;
Color de fondo: #0094ff;
relleno: 5px 10px 5px 10px;
}
.dvitem {
Ancho: 100%;
Altura: 400px;
Color de fondo: #B6FF00;
claro: ambos;
}
.principal {
Ancho: 960px;
Margen: 0px Auto 0px Auto;
}
</style>
</ablo>
<Body>
<div>
<ul>
<li> Inicio </li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
Tal página se reduce en el efecto de pegajosidad como se muestra en la figura:
¿Cómo modificarlo? En páginas tradicionales como esta, solo necesitamos escribir un CSS basado en las características de retransmisión de Windows 8. Deje que nuestra página se presente y se muestre en un ancho de 320 píxeles.
El código de implementación es el siguiente: Agregue el siguiente código de estilo a la página original
@Media Screen y (Max-Width: 320px) {
@-ms-viewport {ancho: 320px; }
.nav {
relleno: 5px 0px 5px 0px;
margen: 0px;
Ancho: 100%; Color de fondo: #fff;
}
.nav li {
Ancho: 300px;
claro: ambos;
margen: 0px 0px 1px 0px;
Color de fondo: #0094ff;
relleno: 5px 0px 5px 0px;
}
.dvitem {
Ancho: 95%;
Altura: 600px;
Color de fondo: #FF00A4;
claro: ambos;
}
.principal {
Ancho: 320px;
Margen: 0px Auto 0px Auto;
}
}
No hay diferencia entre la navegación de pantalla completa y la navegación tradicional.
La diferencia es que el efecto de visualización es obvio cuando lo pegas a una pantalla pequeña como se muestra en la siguiente figura.
Este código de muestra descarga/archivos/riesgo/index.rar