Meta视口不适用于我的网站

时间:2014-12-07 11:58:18

标签: html html5 css3 viewport meta

我应该对此page: 做些什么才能在移动设备上正常工作。我尝试过meta视口,但它不起作用。您可以找到页面here:

和html:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="english.css">
        <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    <body>

        <header class="mainHeader">
            <ul>
                <li><a href="#">Magazine</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Archive</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section class="wr">
            <img src="images/right.png" class="right">
            <img src="images/left.png" class="left">
            <section class="wrapper">
                <div class="container">
                    <h1><a href="#" class="name">Photographer</a></h1>
                    <h1><a href="#" class="title">Story</a></h1>                    
                <p><a href="#" class="lead">DescriptionDescriptionDescription</a></p>
                </div>
            </section>
        </section>

    </body>
</html>

和css:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}
body{
    color: rgba( 255, 255, 255, 0.9 );
    font-family: Helvetica, sans-serif;
    background-image: url("images/14thcover.jpg") ;
    background-size: 100%;
    background-repeat: no-repeat;
}
a:hover{
    color: black;
}
.mainHeader {
    float: right;
    font-size: 1.3em;
    margin-right: 0.8em;
    margin-top: 2em;
    line-height: 1.2;
}
ul {
    list-style-type: none;

}

.mainHeader a{
    color: rgba(255,255,255,0.9)
}

.mainHeader a:hover {
    color: rgba(255,255,255,0.7)
}
.wr {
    width: 75%;
    height:60%;
    min-height: 65%;
    position: absolute;
    top:0;
    bottom: 0;
    right:0;
    left:0;
    margin: auto;
    overflow: auto;
}
.right {
    position: absolute;
    top: 49%;
    right: 0;
}
.left {
    position: absolute;
    top: 49%;
    left: 0;
}
.wrapper {
    width: 80%;
    height:auto;
    background-color: white;
    position: absolute;
    top:0;
    bottom: 0;
    right:0;
    left:0;
    margin: auto;
    overflow: auto;
}

.wrapper ul li{
    list-style-type: none;
    display: inline;
    font-size: 2em;
}

.title {
    color: red;
}
.name, .lead {
    color: black;
}
.lead {
    font-size: 1.3em;
}

.container {
    width: auto;
    top: 35%;
    left: 50%;
    position: absolute;
    overflow: auto;
    transform: translate(-50%, -50%);
    direction: rtl;
    font-weight: 80;
}
.container h1 {
    display: inline;
    font-weight: 100;
    font-size: 2em;
    margin-bottom: 1em;
}
.container p {
    margin-top: 1em;
    text-decoration: none;
}

2 个答案:

答案 0 :(得分:2)

这与您在CSS中指定的一样有效。问题是这些特定宽度不适合设备屏幕上的较小分辨率而不重叠。 您必须指定:

@media (max-with: 768px) {
     .mainHeader {
         float: none;
    }
}

您可以缩小尺寸和字体大小,使其外观与更高分辨率相同,但文字无法读取或点击

答案 1 :(得分:0)