为什么我的启动页面会冻结移动设备?

时间:2014-05-16 00:24:22

标签: html5 css3 mobile

我正在尝试为一个事件创建一个简单的启动页面,但每次我尝试在移动设备上加载页面时都需要永久加载,然后它会冻结。

我认为这可能是由于背景图片非常大。 (记忆明智)所以我以较低的质量保存了照片。

这大大减少了加载时间,但移动网站仍在冻结。

我有自定义字体,(这可能是问题吗?)

这是我的HTML                           

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>The Apocalypse Is HERE!</title>

        <!-- Custom CSS for the 'Full' Template -->
        <link href="css/newStyle.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    $(function() {
        var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
        $fluidEl = $("figure");

        $allVideos.each(function() {

          $(this)
            // jQuery .data does not work on object/embed elements
            .attr('data-aspectRatio', this.height / this.width)
            .removeAttr('height')
            .removeAttr('width');

        });

        $(window).resize(function() {

          var newWidth = $fluidEl.width();
          $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.attr('data-aspectRatio'));

          });

        }).resize();

    });</script>
    </head>

    <body>
    <div id="mainWrapper">
     <div id="topWrapper">
         <div id="zombieWrap"><center>The Zombie Apocalypse Is Here!</center>
      </div>
      <center>
      <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" src="http://www.youtube.com/embed/tb0Op6cpY2s" frameborder="0" allowfullscreen></iframe>
    </div>
            <br>
            <center>
        <div id="bottomWrapper">
            <div class="leftWrapper"><a href="http://www.rugamingcenter.com/zombies">Click Here For Tickets</a></div>
            <div class = "rightWrapper"><a href="http://www.rugamingcenter.com/index1.php">Click Here For the Richmond Underground Home Page</a></div>
        </div>
        </center>
    </div>
    </div>
</body>

这是CSS

   /* GLOBAL STYLES
            -------------------------------------------------- */
            @font-face
            {
            font-family: 'zombieF';
            src: url('zombieFont.ttf');
            }

            /*------------------------------------------------------------------------------------------NON MOBILE=================*/
            body{

                  background-color:black;
                  background: url(wall.jpg);
                  background-size:50%,50%;
                  background-repeat: repeat; 
            }
            #mainWrapper{
                margin-top:2.5em;

            margin-left: 10%;
            margin-right: 10%;

            }

            #topWrapper{
                width:100%;
            }
            #videoWrapper{
                margin-top:1em;

            }
            #zombieWrap{
              font-family: zombieF;
                font-size: 50px;   
                color:red;
                 text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
                        -1px 1px 0 #000000, 3px 3px 5px #111;
              -webkit-text-stroke: 1px black;
              }

             #video{
                max-width: 400px; 
                -webkit-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
            -moz-box-shadow:    0px 0px 24px 0px rgba(50, 50, 50, 0.63);
            box-shadow:         0px 0px 24px 0px rgba(50, 50, 50, 0.63);

              font-family: zombieF;
                font-size: 25px;   
                color:red;
                 text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
                        -1px 1px 0 #000000, 3px 3px 5px #111;
              -webkit-text-stroke: 1px black;
             }
              .leftWrapper{

                width:50%;
                float:left;
              font-family: zombieF;
                font-size: 50px;   
                color: white;
                 text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
                        -1px 1px 0 #000000, 3px 3px 5px #111;
              -webkit-text-stroke: 1px black;

              }

             a:link {
              /* Applies to all unvisited links */
              text-decoration:  none;
              color:white;
              } 
            a:visited {
              /* Applies to all visited links */
              text-decoration:  none;
              color:            white;
              } 

              .leftWrapper:hover { -moz-box-shadow: 0 0 10px #white; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } 
              .rightWrapper{
                width:50%;
            float:right;
              font-family: zombieF;
                font-size: 50px;     
                color: white;
                 text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
                        -1px 1px 0 #000000, 3px 3px 5px #111;
              -webkit-text-stroke: 1px black;
              }
              a:link    {
              /* Applies to all unvisited links */
              text-decoration:  none;
              color:white;
              } 


             @media only screen and (max-width: 500px){
            .rightWrapper{
                width:100%;
              font-family: zombieF;
                font-size: 25px;     
                color: white;

                padding-top:15px;
              }
              .leftWrapper{

                width:100%;
              font-family: zombieF;
                font-size: 25px;   
                color: white;

              }

            #zombieWrap{
                border-top:5px;
              font-family: zombieF;
                font-size: 30px;   
                color:red;
              }
              #mainWrapper{
                height:100%;
            margin-left: 10%;
            margin-right: 10%;

            }

            #containingBlock {
              width:50%;
            }

            video { width: 50% !important; height: auto !important; }
            .videoWrapper {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 */
                padding-top: 25px;
                height: 0;
            }
            .videoWrapper iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            }

也许我错过了什么。有人有什么建议吗?

0 个答案:

没有答案