Question

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

我不知道它在iPhone上的外观，但它适用于我的HTC和iPad。

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

有没有其他人有这个问题，谁能明白为什么会这样？

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;}
        }

Answer 1

<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%}

这应该可以解决问题

移动启动页面＆amp;消失的文字

1 个答案: