在 iphone 上加载时显示边距/背景

【问题标题】：Margin/background displaying when loading on iphone在 iphone 上加载时显示边距/背景
【发布时间】：2017-04-08 02:51:06
【问题描述】：

我希望有人可以帮助我解决我自己的网站遇到的问题。

基本上，我正在为我正在开发的网站设置媒体查询。但是，在 iphone 或类似设备上显示时，它会显示黑色背景或边距，就像有一个宽度为 1800 像素的 div 或隐藏在背景中的东西一样。

我已经尝试了我能想到的一切来解决这个问题，但我没有运气！

我已将网站恢复为简化版本，您可以在 www.creekharmonics.uk 上查看该版本

这个简化版本的 CSS 如下：

    html,body { text-align: center; 
    margin: 0 auto;
    background-color:#000000;
    height:100%;
    }


#main
    {
    background-color:#000000;
    }

#body
    {padding-bottom:500px;}


#wrapper {    display: block; width:100%; margin:0px auto; }


#headerbg
    {

       margin-left: auto;
        margin-right: auto;
    background-color:#000000;
    width:100%;
    height:312px;
    z-index:999;
    }
#headerimg
    {
       margin-left: auto;
        margin-right: auto;
    background-image:url(images/header.jpg);
    width:358px;
    height:312px;
    z-index:1000;

    }




@font-face {
    font-family:bebasneuebold;
    src: url(bebasneuebold.otf);
}

@font-face {
    font-family:bebasneueregular;
    src: url(bebasneueregular.otf); 
    }

@font-face {
    font-family: bebas neue thin;
    src: url(bebasneuethin.otf); 
    }





#delimiter { clear: both; }


.title { font-size: 11pt; font-family: verdana; font-weight: bold; }













#navigation ul {
  text-align: center;
  display: inline;
  margin: 0;
  padding: 30px 4px 30px 4px;
  list-style: none;

}
#navigation ul li {
  font-family:bebasneueregular, bebasneuebold;
    font-size:22px;
    color:#ffffff;
  display: inline-block;
  margin-right: -4px;
  position: relative;

  background: #000000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

#navigation ul li a {
  font-family:bebasneueregular, bebasneuebold;
    font-size:22px;
    color:#ffffff;
    text-decoration:none;
  display: inline-block;
  margin-right: -4px;
  padding: 30px 30px;


}
#navigation ul li:hover {
  background: #1b9bff;
  color: #fff;

}

#navigation ul li ul {
  padding-top:30px;
padding-left:0px;
  position: absolute;
  top: 56px;
  left: 0;
  width: 220px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
    text-align:center;
}

#navigation ul li ul a{
  padding: 30px 67px;
}
#navigation ul li ul li { 
  background: #1b9bff; 
  display: block; 
  color: #fff;
    border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

#content2
    {   
    display:block
    width:100%;
    background-color:#000000;
    height:auto;
    }


#garratt
    {
    background-color:#000000;
    background-image:url(images/jackgarratt.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat:no-repeat;
    position:relative;
    top:-10px;
    left:0px;
    width:100%;
    height:499px;
    margin:0px;
    padding:0px;
    border-top:10px solid #000000;
    display:block;
    clear:both;
    }

#garrattabout
    {
    height:300px;
    width:914px;
      position: relative;
      top: 48%;
      transform: translateY(-52%);

    font-family: bebasneuebold;
    font-size:72px;
    color:#ffffff;
    line-height:20px;
    padding:0px;
    text-align:center;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    }

#garrattabout h1
    {
    font-family: bebas neue;
    font-size:72px;
    color:#00deff;
    line-height:55px;
    display: inline;
    padding:0px;
    }


#garrattabout h2
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:90px;
    background-color:#000000;
    margin-left: auto;
        margin-right: auto;
    line-height:15px;
    font-weight:normal;

    padding-top:14px;
    padding-bottom:14px;
    text-decoration:none;
    border:2px solid #ffffff;
    }

#garrattabout h3
    {
    font-family: helvetica;

    font-size:16px;
    font-weight:normal;
    color:#ffffff;
    line-height:20px;
    padding:0px;
    }

#garrattabout p
    {
    font-family: helvetica;
    font-size:18px;
    color:#ffffff;
    width:850px;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding:0px;
    }


#garrattabout a
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:850px;
    height:200px;
    background-color:#1b9bff;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
    padding-bottom:12px;
    text-decoration:none;
    border-bottom:4px solid #0d81db;
    }

#garrattabout a:hover
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:850px;
    height:200px;
    background-color:#0d81db;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
    padding-bottom:12px;
    text-decoration:none;
    border-bottom:4px solid #0d81db;
    }






#navcentre {

    position: relative;
    top:0px;
    list-style:none;
        margin-left: auto;
        margin-right: auto;
    padding:0px;
    text-align:center;
    width:968px;
    z-index:1004;
    }


#navcentrewidth {

    position: relative;
    top:0px;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    list-style:none;
        margin-left: auto;
        margin-right: auto;
    padding:0px;
    text-align:center;
    width:100%;
    z-index:1005;
    }




@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)  { 

html,body { text-align: center; 
    margin: 0 auto;
    background-color:#000000;
    height:100%;
    width:568px;
overflow:hidden;
    }


#main
    {
    background-color:#000000;
    }

#body
    {padding-bottom:500px;}


#wrapper {    display: block; width:568px; margin:0px auto; }


#headerbg
    {

margin:0px auto;
    background-color:#000000;
    width:568px;
    height:312px;
    z-index:999;
    }
#headerimg
    {
margin:0px auto;
    background-image:url(images/header.jpg);
    width:358px;
    height:312px;
    z-index:1000;

    }




@font-face {
    font-family:bebasneuebold;
    src: url(bebasneuebold.otf);
}

@font-face {
    font-family:bebasneueregular;
    src: url(bebasneueregular.otf); 
    }

@font-face {
    font-family: bebas neue thin;
    src: url(bebasneuethin.otf); 
    }





#delimiter { clear: both; }


.title { font-size: 11pt; font-family: verdana; font-weight: bold; }













#navigation ul {
  text-align: center;
  display: inline;
  margin: 0;
  padding: 30px 4px 30px 4px;
  list-style: none;

}
#navigation ul li {
  font-family:bebasneueregular, bebasneuebold;
    font-size:22px;
    color:#ffffff;
  display: inline-block;
  margin-right: -4px;
  position: relative;

  background: #000000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

#navigation ul li a {
  font-family:bebasneueregular, bebasneuebold;
    font-size:22px;
    color:#ffffff;
    text-decoration:none;
  display: inline-block;
  margin-right: -4px;
  padding: 30px 30px;


}
#navigation ul li:hover {
  background: #1b9bff;
  color: #fff;

}

#navigation ul li ul {
  padding-top:30px;
padding-left:0px;
  position: absolute;
  top: 56px;
  left: 0;
  width: 220px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
    text-align:center;
}

#navigation ul li ul a{
  padding: 30px 67px;
}
#navigation ul li ul li { 
  background: #1b9bff; 
  display: block; 
  color: #fff;
    border-bottom: 1px solid #0082e7;
}
#navigation ul li ul li:hover { background: #158eed; }
#navigation ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

#content2
    {   
    display:block
    width:568px;
    background-color:#000000;
    height:auto;
    }


#garratt
    {
    background-color:#000000;
    background-image:url(images/jackgarratt.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat:no-repeat;
    position:relative;
    top:-10px;
    left:0px;
    width:568px;
    height:499px;
    margin:0px;
    padding:0px;
    border-top:10px solid #000000;
    display:block;
    clear:both;
    }

#garrattabout
    {
    height:300px;
    width:400px;
      position: relative;
      top: 48%;
      transform: translateY(-52%);

    font-family: bebasneuebold;
    font-size:40px;
    color:#ffffff;
    line-height:20px;
    padding:0px;
    text-align:center;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    }

#garrattabout h1
    {
    font-family: bebas neue;
    font-size:72px;
    color:#00deff;
    line-height:55px;
    display: inline;
    padding:0px;
    }


#garrattabout h2
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:90px;
    background-color:#000000;
    margin-left: auto;
        margin-right: auto;
    line-height:15px;
    font-weight:normal;

    padding-top:14px;
    padding-bottom:14px;
    text-decoration:none;
    border:2px solid #ffffff;
    }

#garrattabout h3
    {
    font-family: helvetica;

    font-size:16px;
    font-weight:normal;
    color:#ffffff;
    line-height:20px;
    padding:0px;
    }

#garrattabout p
    {
    font-family: helvetica;
    font-size:18px;
    color:#ffffff;
    width:400px;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding:0px;
    }


#garrattabout a
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:400px;
    height:200px;
    background-color:#1b9bff;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
    padding-bottom:12px;
    text-decoration:none;
    border-bottom:4px solid #0d81db;
    }

#garrattabout a:hover
    {
    font-family: bebasneuebold;
    font-size:30px;
    color:#ffffff;
    width:400px;
    height:200px;
    background-color:#0d81db;
    margin-left: auto;
        margin-right: auto;
    line-height:20px;
    font-weight:normal;
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
    padding-bottom:12px;
    text-decoration:none;
    border-bottom:4px solid #0d81db;
    }






#navcentre {

    position: relative;
    top:0px;
    list-style:none;
        margin-left: auto;
        margin-right: auto;
    padding:0px;
    text-align:center;
    width:568px;
    z-index:1004;
    }


#navcentrewidth {

    position: relative;
    top:0px;
    border-top:1px solid #181818;
    border-bottom:1px solid #181818;
    list-style:none;
        margin-left: auto;
        margin-right: auto;
    padding:0px;
    text-align:center;
    width:568px;
    z-index:1005;
    }


}

标题 HTML 如下：

    <html>
<head>


<a name="top"></a>
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?> </title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

</head>
<body>


<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '226562807717253',
      xfbml      : true,
      version    : 'v2.6'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


<div id="wrapper">
<div id="headerbg">
<div id="headerimg">
    </div>
    </div>
<div id="navcentrewidth">
<div id="navcentre">

<div id="navigation">
<ul><li><a href="http://www.creekharmonics.com/">Home</a></li>
  <li><a href="http://www.creekharmonics.com/news">News</a></li>
  <li>
    <a href="http://www.creekharmonics.com/reviews">Reviews</a>
    <ul>
      <li><a href="http://www.creekharmonics.com/global">Global</a></li>
      <li><a href="http://www.creekharmonics.com/underground">Underground</a></li>
      <li><a href="http://www.creekharmonics.com/gear">Gear</a></li>
      <li><a href="http://www.creekharmonics.com/live">Live</a></li>
    </ul>
  </li>

  <li>
    <a href="Communuity.html">Community</a>
    <ul>
      <li><a href="http://www.facebook.com/creekharmonics">Facebook</a></li>
      <li><a href="http://www.twitter.com/creekharmonics">Twitter</a></li>
    </ul>
  </li>
</ul>
</div>
</div>
</div>


<!-- .main -->
</div>

索引代码在这里：

    <?php get_header(); ?>

<div id="content2">
            <div id="garratt">
                <div id="garrattabout">
                <h2>Global</h2>
                <br/>
                Jack Garratt - Phase
                <p>Phase takes risks and most of them are pulled off with class and distinction, it’s fun, it’s largely original and it’s one I, nor anybody can claim to know inside out in it’s youth- that time will come. In all, Jack Garratt’s debut is immense, driven, sexy, mad- but most of all, fearless.</p>
                <br/>
                <p><a href="2016/04/27/jack-garratt-phase/">Read More</a></p>
                </div>
            </div>

</div>

这是它当前在 iphone 上的加载方式：

iphone image

这是我希望它加载的方式：

without black background 这是我使用 Wordpress 从头开始​​创建的第一个网站，因此这是一个不断学习的过程，我确信有些事情我应该做不同的事情，但这是我似乎无法克服的一个障碍！

任何帮助将不胜感激。

【问题讨论】：

  • 您希望图像横跨整个页面吗？
  • 我基本上是想去掉围绕内容的黑色背景。就像这张图片：i.stack.imgur.com/jGv6u.jpg 所以它看起来像这样：i.stack.imgur.com/84otu.jpg 我可以将图片拉伸到 100%，但是我遇到了字体/内容不成比例的问题。

标签： html css wordpress media-queries


【解决方案1】：

您可以使用meta 标签设置适当的缩放级别。把它放到你的head:

<meta name="viewport" content="width=586">

这告诉手机将视口视为 586 像素宽，与您的内容相匹配。

更多信息在这里https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

在这里加载更多http://www.quirksmode.org/mobile/metaviewport/

【讨论】：

  • 太棒了！非常感谢。我已经尝试了我能想到的一切来解决这个问题，但结果我只是不知道答案。
  • np。如果您想进一步挖掘，我添加了一些包含更多信息的链接
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-07-08
  • 2016-06-23
  • 1970-01-01
  • 2020-08-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode