html - 在 iphone 上加载时显示边距/背景-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 09:31:12

我希望有人能帮助我解决我自己网站上的问题。

基本上，我正在为我工作的网站设置媒体查询。然而，当在 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;
    }


}

header 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 从头开始创建的第一个网站，所以它一直是一个不断学习的曲线，我确信有些事情我应该做不同的事情，但这是一个我似乎无法克服的障碍!

非常感谢任何帮助。

最佳答案

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

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

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

并在此处加载更多 http://www.quirksmode.org/mobile/metaviewport/

关于html - 在 iphone 上加载时显示边距/背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40775580/

文章推荐： jquery - 为什么页面在切换菜单后滚动到顶部

文章推荐： python - 基于另一列追加 Pandas DataFrame 列

文章推荐： linux - 在 bash 中获取参数

javascript - 加载 gif 不等待 iFrame 加载？
我想要显示正在加载的 .gif，直到所有内容都已加载，包括嵌入的 iframe。但是，目前加载 gif 会在除 iframe 之外的所有内容都已加载后消失。我怎样才能让它等到 iframe 也加载完毕
javascript - AngularJS 加载 JSON 数据然后从中解析/加载 HTML
首先，这是我第一次接触 Angular。我想要实现的是，我有一个通知列表，我必须以某种方式限制 limitTo，因此元素被限制为三个，在我单击按钮后，其余的应该加载。我不明白该怎么做: 设置“ V
java - 瓦片不会随 map View 加载，但会随 fragment 加载
我正在尝试在我的设备上运行这个非常简单的应用程序(使用 map API V2)，并且出于某种原因尝试使用 MapView 时: 使用 java 文件: public class MainMap e
python - 通过 PyXLL 加载 scipy 时出现问题 - 是否有人成功通过 PyXLL 加载 Scipy？
我正在使用 Python 2.6、Excel 2007 Professional 和最新版本的 PyXLL。在 PyXLL 中加载具有 import scipy 抛出异常，模块未加载。有没有人能够在
unreal-engine4 - 虚幻引擎 4 : What is correct way to PAK files, 加载/挂载它们并在打包游戏中使用 AssetRegistry 加载 Assets ？
我想做这个: 创建并打包原始游戏。然后我想根据原始游戏中的蓝图创建具有新网格/声音/动画和蓝图的其他 PAK 文件。原始游戏不应该知道有关其他网格/动画/等的任何信息。因此，我需要在原始游戏中使用 A
你会几种读取/加载 properties配置文件方法
**摘要：**在java项目中经常会使用到配置文件，这里就介绍几种加载配置文件的方法。本文分享自华为云社区《【Java】读取/加载 properties配置文件的几种方法》，作者：Copy工程师。
class - 条件类导入/加载
在 Groovy 脚本中是否可以执行条件导入语句？ if (test){ import this.package.class } else { import that.package.
CUDA:加载/存储效率与全局内存指令重放之间的关系
我正在使用 NVidia 视觉分析器(来自 CUDA 5.0 beta 版本的基于 eclipse 的版本)和 Fermi 板，我不了解其中两个性能指标: 全局加载/存储效率表示实际内存事务数与请求事
加载 View 时angularjs清除历史记录
有没有办法在通过 routeProvider 加载特定 View 时清除 Angular JS 存储的历史记录？ ? 我正在使用 Angular 创建一个公共(public)安装，并且历史会积累很多，
initialization - 加载 Storyboard时首先调用什么方法？
使用 Xcode 4.2，在我的应用程序中， View 加载由 segue 事件触发。在 View Controller 中首先调用什么方法？ -(void) viewWillAppear:(BOO
Django JSONField转储/加载
我在某些Django模型中使用JSONField，并希望将此数据从Oracle迁移到Postgres。到目前为止，当使用Django的dumpdata和loaddata命令时，我仍然没有运气来保持J
Cocoa 加载 ViewNib
创建 Nib 时，我需要创建两种类型:WindowNib 或 ViewNib。我看到的区别是，窗口 Nib 有一个窗口和一个 View 。如何将 View Nib 加载到另一个窗口中？我是否必须创建
rust - 加载.env并使用辅助函数将其转换为一般结构
我想将多个env.variables转换为静态结构。我可以手动进行: Env { is_development: env::var("IS_DEVELOPMENT")
c++ - 加载/存储宽松原子变量和普通变量有什么区别？
正如我从一个测试用例中看到的:https://godbolt.org/z/K477q1 生成的程序集加载/存储原子松弛与普通变量相同:ldr 和 str 那么，宽松的原子变量和普通变量之间有什么区别吗
javascript - 加载/重定向到外部网站时如何添加加载屏幕？
我有一个重定向到外部网站的按钮/链接，但是外部网站需要一些时间来加载。所以我想添加一个加载屏幕，以便外部页面在显示之前完全加载。我无法控制外部网站，并且外部网站具有同源策略，因此我无法在 iFrame
bash - 加载.env的Dockerfile入口点bash文件在容器中不可见
我正在尝试为我的应用程序开发一个Dockerfile，该文件在初始化后加载大量环境变量。不知何故，当我稍后执行以下命令时，这些变量是不可用的: docker exec -it container_na
javascript - 加载 JavaScript
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
JavaScript 加载 html
我刚刚遇到一个问题，我有一个带有一些不同选项的选择标签。现在我想检查用户选择了哪些选项。然后我想将一个新的 html 文件加载到该网站(取决于用户选中的选项)宽度 javascript，我该怎么做
黑莓 - 应用程序设置保存/加载
我知道两种保存/加载应用程序设置的方法: 使用PersistentStore 使用文件系统(存储，因为 SDCard 是可选的) 我想知道您使用应用程序设置的做法是什么？使用 PersistentS
Vulkan 加载 vkCreateDebugReportCallbackEXT
我开始使用 Vulkan 时偶然发现了我的第一个问题。尝试创建调试报告回调时(验证层和调试扩展在我的英特尔 hd vulkan 驱动程序上可用，至少它是这么说的)，它没有告诉我 vkCreateDeb

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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