Question

所以，让我直接告诉我的问题。我正在开发一个网站。所以我尝试访问我正在使用我的iphone开发的这个网站。问题是，当我用我的电脑访问该网站时，当我用我的iphone访问它时，我得到了一些不同的输出。 This图像是我用PC的Chrome访问它时输出与我PC上的所有其他浏览器相同，而this是我用iphone的Safari访问它时输出相同当我用我的iPhone的Chrome访问它时也是如此。看看从iPhone和PC访问的差异？是的。我用iphone访问导航栏上方的那个“空间”。那么有人可以帮我解决这个问题吗？非常感谢。

这是我的CSS和HTML

body {
  background: rgb(25, 181, 254);
  margin: 0px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

#header {
  width: 100%;
  min-width: 1050px;
  height: 150px;
  margin-bottom: 20px;
  text-align: center;
}
#logoBox {
  display: inline-block;
  width: 300px;
  height: 150px;
  overflow: hidden;
}
#logoBox:active {
  height: 140px;
  margin: 5px auto;
}
.logo {
  background: url('img/icon/logo.png') no-repeat;
  width: 300px;
  height: 100%;
}
#navBox {
  width: 150px;
  height: 150px;
  overflow: hidden;
  display: inline-block;
}
.transition {
  transition: height 0.15s, margin 0.15s, background 0.7s;
  -webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
  -o-transition: height 0.15s, margin 0.15s, background 0.7s;
  -ms-transition: height 0.15s, margin 0.15s, background 0.7s;
  -moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
  height: 140px;
  margin-bottom: 5px;
}
#navBox.green {
  background: rgb(80, 190, 106);
}
#navBox.orange {
  background: rgb(250, 170, 30);
}
#navBox.green:hover {
  background: rgb(4, 160, 114);
}
#navBox.orange:hover {
  background: rgb(240, 130, 20);
}
#iconBox {
  height: 53.4%;
  width: 100%;
  margin-top: 13.4%;
  text-align: center;
}
#iconBorder {
  width: 70px;
  height: 70px;
  border-radius: 40px;
  border: 5px solid rgb(255, 255, 255);
}
img.icon {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
a.nav {
  display: inline-block;
  text-decoration: none;
}
#navProp {
  width: 100%;
  height: 33.3%;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  margin-top: 6.7%;
}
.center{
	margin-left:auto;
	margin-right:auto;
}

<html>

<head>
  <title>Welcome to SIRIUS</title>
  <?php require_once "theme.php"; ?>
</head>

<body>
  <div id="header">
    <a href="index.php" class="nav">
      <div id="logoBox" class="transition">
        <img src="img/icon/logo.png" class="logo">
      </div>
    </a>
    <!--
			
			-->
    <a href="index.php" class="nav">
      <div id="navBox" class="green transition">
        <div id="iconBox">
          <div id="iconBorder" class="center nav">
            <img src="img/x.gif" class="icon home">
          </div>
        </div>

        <div id="navProp">Home</div>
      </div>
    </a>
    <!--
			
			-->
    <a href="aboutUs.php" class="nav">
      <div id="navBox" class="orange transition">
        <div id="iconBox">
          <div id="iconBorder" class="center nav">
            <img src="img/x.gif" class="icon aboutUs">
          </div>
        </div>

        <div id="navProp">About Us</div>
      </div>
    </a>
    <!--

			-->
    <a href="register.php" class="nav">
      <div id="navBox" class="green transition">
        <div id="iconBox">
          <div id="iconBorder" class="center nav">
            <img src="img/x.gif" class="icon register">
          </div>
        </div>

        <div id="navProp">Register</div>
      </div>
    </a>
    <!--
			
			-->
    <a href="login.php" class="nav">
      <div id="navBox" class="orange transition">
        <div id="iconBox">
          <div id="iconBorder" class="center nav">
            <img src="img/x.gif" class="icon login">
          </div>
        </div>

        <div id="navProp">Login</div>
      </div>
    </a>
    <!--
			
			-->
    <a href="admin.php" class="nav">
      <div id="navBox" class="green transition">
        <div id="iconBox">
          <div id="iconBorder" class="center nav">
            <img src="img/x.gif" class="icon admin">
          </div>
        </div>

        <div id="navProp">Admin</div>
      </div>
    </a>
  </div>
</body>

</html>

Answer 1

道歉我无法看到您的图片作为工作阻止内容：P

我在这里猜测，但很可能是浏览器指定的东西，你没有边距等。尝试使用reset.css文件或者在桌面上使用调试（F12）并假装是手机调试。（我非常确定在chrome中你可以指定一个手机浏览器类型，假设所有现代浏览器都有移动仿真）

或者它可能是最小宽度：1050px; 如果您正在为响应式设计进行设计，则可能需要进行一些@media查询。

[edit]我也注意到你没有指定html。也许浏览器在html标签上添加一些css？ html {margin:0; padding:0;}

iphone上的CSS输出与PC不同

1 个答案: