iPhone 7 Plus/12 Pro Max网站UI异常问题技术求助

算力阿峰

2026-7-14

问题描述

在iPhone 7 Plus和iPhone 12 Pro Max上访问网站时，hero image被放大、文本尺寸过大且导航栏消失；
其他移动设备访问时，hero image、文本尺寸均正常，移动端导航栏可见；
异常设备横屏并设置缩放至50%时，显示效果与电脑版完全一致（以iPhone 7 Plus为例）。

出现异常UI时的HTML代码

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiversity -- Find your University</title>
    <link rel="stylesheet" href="../stylesheets/navbar.css">
    <link rel="stylesheet" href="../stylesheets/general.css">
    <link rel="stylesheet" href="../stylesheets/hero.css">
    <link rel="stylesheet" href="../stylesheets/footer.css">
    <link rel="stylesheet" href="../stylesheets/colour-palette.css">
    <link rel="stylesheet" href="../stylesheets/cursors.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700&display=swap"
      rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <link rel="apple-touch-icon" sizes="180x180" href="../pagetab-icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../pagetab-icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../pagetab-icons/favicon-16x16.png">
    <link rel="manifest" href="../pagetab-icons/site.webmanifest">
    <link rel="preload" href="../images/hero-img-laptops.jpg" as="image" media="(min-width: 1201px)">
    <link rel="preload" href="../logo/multiversity-logo.png" as="image">
    <link rel="preload" href="../images/hero-img--phones-xs.jpg" as="image" media="(max-width: 500px)">
    <link rel="preload" href="../images/hero-img--phones.png" as="image" media="(min-width: 501px) and (max-width: 768px)" >
    <link rel="preload" href="../images/hero-img--tablets.jpg" as="image" media="(min-width: 769px) and (max-width: 1200px)">
  </head>
  <body class="normal-cursor--field">
    <section class="hero-section normal-cursor--field">
      <p class="slogan normal-cursor--field">
        <span id="slogan--1">for students, </span>
        <span id="slogan--2">by&nbsp;students</span>
      </p>
      <a href="/search" class="normal-cursor--field">
        <button class="hero-search-bar pointer-cursor--field">
          <div>
            <span class="search-bar-label pointer-cursor--field">Click here: find a university</span>
            <span class="search-bar-cursor"></span>
          </div>
          <div class="search-icon--container"><img class="search-icon" src="../icons/search.svg"></div>
        </button>
      </a>
      <a class="add-scholarship--link pointer-cursor-small--field" href="/universities">
        OR ADD YOUR UNIVERSITY
      </a>
    </section>
    <script async src="../js/utils.frontend.js" type="module"></script>
  </body>

</html>

主CSS文件代码

/* 
TOWARDS THE END, GIVE EVERY FONT A BACKUP FONT!!!

*/

:root {
  --hero-link-gradient: linear-gradient(to right, rgb(72, 123, 190), rgb(255, 255, 255)),
  linear-gradient(to right, rgba(255, 0, 0, 1), rgb(118, 88, 230), rgba(0, 100, 200, 1));
  --hero-font-size: 7em;
}

/* What the user is met with when they click on the page */
.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  background-image: url(../images/hero-img-laptops.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 3%;
  color: white;
  background-repeat: no-repeat;
  /* background-color: var(--homepage-main-colour); */
  height: 97.5vh; 
}

/* All the children of the hero section are given styles */
.hero-section > * {
  /* Unnecessary code? */
  /* display: block; */
  cursor: default;
  font-family: var(--main-font);
}

#slogan--1, #slogan--2 {
  font-weight: 700;
  font-size: var(--hero-font-size);
}

.hero-search-bar {
  /* Necessary to add in the font AGAIN */
  font-family: var(--tertiary-font);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  width: 20em;
  max-width: 75vw;
  margin-top: 4vh;
  margin-bottom: 1vh;
  padding: 0.25em 0.6em;
  padding-bottom: 0.3em;
  border-radius: 1.8rem;
  border-width: 1px;
  border-color: white;
  position: relative;
  font-size: 2em;
  color: #7e7e7e;
  background-color: white;
}

.search-bar-label {
  white-space: nowrap;
}

.hero-search-bar:active {
  opacity: 0.9;
}

.search-bar-cursor {
  animation: blink 1.7s infinite;
  background-color: #414141;
  display: inline-block;
  height: 1em;
  position: absolute;
  left: 0.68em;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}  

.search-icon--container {
  display: flex;
  align-items: center;
  height: 1.5em;
}

.search-icon {
  height: 85%;
}


.add-scholarship--link {
  margin-top: 0.3em;
  padding-bottom: 0.2em;
  font-size: 1.2em;
  font-weight: 600;
  font-family: var(--tertiary-font);
  background: var(--hero-link-gradient);
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

.add-scholarship--link:hover {
  background-size: 0 0.1em, 100% 0.1em;
}


/*     MEDIA QUERIES    */
/* -------------------- */

@media screen and (max-width: 1200px) {
  .hero-section {
    background-image: url(../images/hero-img--tablets.jpg);
    background-position: 17%;
  }

  #slogan--1, #slogan--2 {
    display: block;
  }
}

@media screen and (max-width: 768px) {

  .hero-section {
    background-image: url(../images/hero-img--phones.png);
    background-position: bottom center;
  }

  #slogan--1, #slogan--2 {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2em;
    font-size: calc(var(--hero-font-size) - 3em);
  }

  .hero-search-bar {
    width: 14em;
    z-index: 5;
  }

  
}

@media screen and (max-width: 600px) {

  .add-scholarship--link {
    font-size: 1.1em;
  }
}

@media screen and (max-width: 500px) {

  .hero-section {
    background-image: url(../images/hero-img--phones-xs.jpg);
    background-position: bottom center;
  }

  /* Setting the style for the hamburger menu to be visible with the new image*/
  .hamburger-menu .line {
    box-shadow: 0px 0px 3px black;
  }

  .slogan {
    display: flex;
    line-height: 6em;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    width: 95vw;
  }

  .hero-search-bar {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 19px;
  }

  .add-scholarship--link {
    font-size: 1em;
  }

}

@media screen and (max-width: 400px) {
  .slogan {
    font-size: 10px;
  }
}

@media screen and (max-width: 300px) {
  .slogan {
    font-size: 10px;
  }

  .hero-search-bar {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 16px;
  }

}

已尝试方案

尝试编写针对设备像素比的media query以单独设置样式，但无效果，发现设备未匹配任何media query（包括全局的min-resolution:1dpi）；
尝试更换浏览器、清除缓存、逐一移除样式表及JavaScript文件，均无改善；
通过MacBook的Develop菜单调试iPhone 7 Plus：UserAgent传输正常，HTML已预加载对应设备的image但未显示（实际显示电脑版image），window.innerWidth为预期的414px。

内容的提问来源于stack exchange，提问作者calebsakala