Comment: The editor of this article will introduce to you how to use HTML5 to achieve the support of websites in Windows 8. If you need it, please refer to it
First, let’s learn about the support of Windows 8. Metro applications in Windows 8 can split the screen very well. The following figure
This allows users to switch very easily during use. The system also has rigid regulations on attachment. At most two screens, one is big and the other is small. And the width of the small screen is fixed at 320 pixels.
So when users post the website into a small screen, the page is reduced in proportion by default. As shown in the figure below:
So how can we solve such a problem very well? What about making the website show a very friendly effect under the small screen of Windows 8? Below I have a simple example
As shown in the picture, a very simple and traditional page, including horizontally arranged navigation, content, etc.
And the same is true for traditional code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.nav {
padding: 5px 0px 5px 0px;
margin: 0px;
width: 100%;
list-style-type: none;
background-color: #cddcd6;
height: 28px;
}
.nav li {
margin: 0px 1px 0px 0px;
float: left;
background-color: #0094ff;
padding: 5px 10px 5px 10px;
}
.dvItem {
width: 100%;
height: 400px;
background-color: #b6ff00;
clear: both;
}
.main {
width: 960px;
margin: 0px auto 0px auto;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<div>
</div>
</div>
</body>
</html>
Such a page is reduced in the sticking effect as shown in the figure:
How to modify it? In traditional pages like this, we only need to write a CSS based on the relay characteristics of Windows 8. Let our page be laid out and displayed at a width of 320 pixels.
The implementation code is as follows: Add the following style code to the original page
@media screen and (max-width: 320px) {
@-ms-viewport { width: 320px; }
.nav {
padding: 5px 0px 5px 0px;
margin: 0px;
width: 100%; background-color:#fff;
}
.nav li {
width: 300px;
clear: both;
margin: 0px 0px 1px 0px;
background-color: #0094ff;
padding: 5px 0px 5px 0px;
}
.dvItem {
width: 95%;
height: 600px;
background-color: #ff00a4;
clear: both;
}
.main {
width: 320px;
margin: 0px auto 0px auto;
}
}
There is no difference between full-screen browsing and traditional browsing.
The difference is that the display effect is obvious when you stick it to a small screen as shown in the following figure.
This sample code download/Files/risk/Index.rar