移动启动页面和消失的文本

在实际网站上工作时，我们正在建立一个基本的启动页面。问题是，当在一些移动设备上观看时，在纵向/垂直视图中，大多数文本似乎都在屏幕上方。在横向/横向视图中，一切都很好。

我不知道它在iPhone上看起来怎么样，但它在我的HTC和iPad上都能工作。

三星Galaxy S3报告了这个问题(有两个人告诉我同样的事情(。当用户放大时，他们可以移动文本来查看它。我在CSS中没有负边距，也没有办法找出为什么会发生这种情况。

其他人有这个问题吗？有人能理解为什么会发生这种情况吗？

网站在这里：http://find-thespot.com/

HMTL:

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>The Spot</title>
<link rel="stylesheet" type="text/css" href="fonts/skyliner.css">
<link rel="stylesheet" type="text/css" href="fonts/underworld.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body> 
                <div class="container">
                <h3>Coming Soon</h3>
                <h1>THE SPOT</h1>
                <h2>LASER TAG & ARCADE </h2>
                <a href="mailto:info@find-thespot.com" title="Contact Us">Contact Us</a>
                </div>
    </body>
</html>

CSS

body {
    font: 100%/1.4 Helvetica, Geneva, sans-serif;
    background: url(imgs/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #0e0904;
    width:100%;
    max-height: 100%;
    color: #000000;
}
    .container {
        width: 100%;
        margin: 0 auto;
        text-align:center;
        margin-top:210px;
    }

    /* ~~ Element/tag selectors ~~ */

    h1{ 
        font-size:150px;
        line-height:145px;
        font-family: 'UnderWorldRegular', serif;
        margin: 0;
        /*font-weight:bold;*/
        word-wrap:break-word;
        word-break: normal;
    }
    h2{ 
        font-size:62px;
        line-height:60px;
        font-family: 'UnderWorldRegular', serif;
        margin: 0 0 25px;
        /*font-weight:bold;*/
        word-wrap:break-word;
        word-break: normal;
    }
    h3{
        font-size: 80px;
        line-height:75px;
        font-family: 'SkylinerRegular', sans-serif;
        margin: 0 0 15px;   
        /*font-family: 'Didact Gothic', sans-serif;*/
        /*font-weight:bold;*/
        /*letter-spacing:2px;*/
    }
    a{ 
        font-size: 25px; 
        color: #000;
        text-decoration: underline; 
    }

    a:hover, a:active, a:focus {
        text-decoration: none;
    }

    /*Mobile CSS */
    @media (max-width: 1200px) {
        h1{ font-size: 90px; line-height:95px;}
        h2{font-size: 35px; line-height:38px;}
        h3{font-size: 60px; line-height:50px;}
        a{ font-size: 17px; line-height:16px; }
        .container {margin-top: 120px;}
    }

    @media (max-width: 1025px) {
        h1{ font-size: 70px; line-height:95px;}
        h2{font-size: 30px; line-height:38px;}
        h3{font-size: 35px; line-height:50px;}
        a{ font-size: 17px; line-height:16px; }
        .container {margin-top: 60px;}
        body {background-image: url(imgs/bg-mob.jpg) !important;
    }
    @media (max-width: 770px) {
        .container {margin-top: 60px;}
    }

    @media (max-width: 500px) {
        h1{ font-size: 75px; line-height:75px;}
        h2{ font-size: 30px; line-height:30px;}
        h3{font-size: 40px; line-height:40px;}
        .container {margin-top: 50px;}
        /*a{ font-size: 13px; line-height:13px; }*/
        }
        @media (max-width: 360px) {
        .container {margin-top: 20px; min-width:200px;}
        }

<head>中的视口标记丢失，请添加此

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />

也将此添加到您的css中：

html {height:100%}
body {height:100%}

这应该可以解决

的问题

相关内容

最新更新

热门标签：