在iPhone上加載時的邊距/背景顯示

我希望有人能幫我解決我在自己的網站上遇到的問題。在iPhone上加載時的邊距/背景顯示

基本上，我正在爲我正在處理的網站設置媒體查詢。但是，當顯示在iPhone或類似設備上時，它會顯示黑色背景或邊距，就好像有一個寬度爲1800px的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創建，所以它一直是一個不斷學習的曲線，我相信我應該有不同的表現，但這是我無法克服的一個障礙！

任何幫助將非常感激。

來源

2016-11-23 Lewis Newman

爲您加載更多信息要圖像在整個頁面舒展？ – Blezx

我基本上想要刪除圍繞內容的黑色背景。喜歡這張圖片：https://i.stack.imgur.com/jGv6u.jpg 所以它看起來像這樣：https：//i.stack.imgur.com/84otu.jpg 我可以拉伸圖像到100％，但後來我遇到了字體/內容不成比例的問題。 –

您可以使用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/

來源

2016-11-23 23:21:16 CupawnTae

太棒了！非常感謝你。我嘗試了所有我能想到的方法來解決這個問題，但事實證明我只是不知道答案。 –

np。如果您想進一步挖掘，我會添加更多信息的鏈接 – CupawnTae

在iPhone上加載時的邊距/背景顯示

回答

相關問題