网站在 Instagram 内部浏览器上显示不同

问题描述 投票：0回答：1

我制作了一个网站，我基本上隐藏并相应地在移动屏幕尺寸上显示一个元素。 这似乎适用于任何浏览器和尺寸，但不知何故 Instagram 显然以非常不同的方式呈现它......（请参阅随附的屏幕截图）。它基本上显示了这两个元素。我想隐藏的一个和我想展示的一个。 （您可以在 https://cato-sports.com/events/berlin-marathon-2024 上自行测试该网站）

它应该是这样的：显示网站正确布局的 iPhone 屏幕截图

这是在 Instagram 应用程序中打开它的样子：在此处输入图像描述

这是此子页面的一个简化片段：

.event-container-full {
  height: 100%;
  width: 100%;
}

.event-header {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: -2;
  background-color: black;
}

.event-image-container {
  grid-column: 1 / span 2;
  border-radius: 7px;
}

.event-header-img {
  height: 100%;
  display: block;
  object-fit: cover;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  opacity: 70%;
}

.event-infobox {
  grid-column: 3 / span 7;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content;
}

.event-form {
  position: absolute;
  translate: -50% -50%;
  width: 80%;
  left: 50%;
  top: 50%;
  padding: 1rem;
  border-radius: 7px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  z-index: -1;
}

@media only screen and (max-width:800px) {
  .event-form {
    display: flex;
    position: relative !important;
    flex-direction: column;
    width: 100%;
    height: auto;
    translate: unset;
    justify-self: end;
    left: unset;
    pointer-events: all;
  }
  .event-infobox {
    display: flex;
    flex-direction: column;
  }
  .event-container-full {
    pointer-events: none;
    position: relative !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    height: auto;
  }
  .form-container-m {
    display: block !important;
    padding: 1rem !important;
    padding-top: 0 !important;
  }
  .form-container {
    display: none !important;
  }
  .event-header {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
<div class="event-container-full">

  <div class="event-header">
    <img src="https://cato-sports.com/media/pages/events/berlin-marathon-2024/b6920f0b41-1726914650/foto-24-small.jpeg" class="event-header-img">
  </div>

  <section class="event-form">

    <div class="event-image-container" style="background-image: url(https://cato-sports.com/media/pages/events/berlin-marathon-2024/b6920f0b41-1726914650/foto-24-small.jpeg); background-repeat:no-repeat; background-size:cover; background-position: center;">
      <!-- <img src="https://cato-sports.com/media/pages/events/berlin-marathon-2024/b6920f0b41-1726914650/foto-24-small.jpeg" class="event-image-card"> -->
    </div>
    <div class="event-infobox">
      <mark class="event-page-title">Marathon Post Race Zone</mark>
      <mark class="event-page-location">Berlin</mark>
      <div class="event-page-time">
        29.09.2024 — 2:00 pm</time>
      </div>
      <hr class="eventcard-ruler">
      <p class="event-text">
        Join us for our Post Race Community Zone @LAP Coffee (Uhlandstra&szlig;e 30) for free coffee &amp; pastries, live tunes &amp; exclusive access to our new performance line. The first 30 people showing up will receive a special gift. You don&#039;t need
        to run the Marathon to join! </p>

      <p class="event-guests">19 Guests already attending</p>

      <div class="form-container">

        <form action="https://cato-sports.com/forms/marathon-post-race-zone-berlin" class="form" enctype="application/x-www-form-urlencoded" hx-post="https://cato-sports.com/forms/marathon-post-race-zone-berlin" hx-swap="outerHTML show:top" hx-vals="{&quot;dreamform:page&quot;:&quot;78PYElO/+wPRZVpaVP2+Cqw9g367wbu6yz53iztMs31YEjg5hzgXg8v6+znHFGzZLXhbNuDxzSOuJwSS8B7GWKmZczNjAB6Rf4rMpbFhNOU=&quot;,&quot;dreamform:attr&quot;:&quot;sWtzhDpbD2jWMA/dguqVy1bSImmJsBirce+6vtCJXcQ5geoFtsXT805uZO1XEvDMGTOpIOGDxD8kNjx3aoLlWDi3JxZHN9k0ffVXTzc20y4q1hbhQLQFi0YJsF1YdviZSFYSPbz+yQ3+MkMLd57qVscPwdyWFn8A1Mj6HNt09dhyVp/JOTOai1meXEBn97W0AlWfawczMpLekmincrfzsTYcOMe1lPOtsdE8Ph0QC+nu2ufYPxNB5eMrEDV1266TuT6lceu7n4OX/Gwg12u80D25zzGpBBThoQxijpDQNkJwCM2axkwGpe6/WNa9kIURkOCNdc9FbBzhwpmtYQC2DRDgM+uq16j5uVr0rZyCSBROfQt9ncTaMgymeTsm58qLSGwHm8fFUPfQ9FNArh1PhASILTOsyaZ6t9IXz4HA7ZpIbsm72zltj4c+hShgd4wq32NBVhVbbjUAWkHRhrm0fD7YSUv3Wq0K7VOPrai04ZxXJ+QN+6G+7lYSZNhN2gqbkiq1C5a4lQcSAIdaaqitiAH3IFhBbwxNryV+T6qVW7nYTyGqs6qLuhiccYTllH74ookiNS8tgO0t+QYLbtePRS1ufauT68mXKQk/h91w+LuT4A9lf63DKgCz9hZOB+8H+Sel0tfwAmj4kbxXK81atTJDUNhS9OxJe9S4QpYH5T6JMyG1x69T5mTTtlwWHqmQ2lGVtV+F6JsY1VmHwYr0rskOek0hGKTRct4J/z+6Zli7Syj8mCZOpSYik1+Jj8NMxIYpn+10aC8tZgQn7v+TXz2dmv92wTNmUKf0/IILGRYdRMynGcAGrurbLMxVI7y52WrIYvJbW9ZrnDP6e3mv38PM47ZExWRGTR0ZcYlagZrV3MguysssbHUTGDbi8irVP8cj/mgLtNOKBgXwSGTfgDGnz7H/8qiu9njxrBmToCQcIok2bFo3rmTAzDpz1Z/g2zaY2USk9ndVopsT56Ww9ccKIxAt7T4UdlHnvnKvitnIpWosvg+Zs34ZapEsHZkDJZFcD+h5TXTmHgkkRvKuRMxq6Uvj/Ps/7dkYgyBTtAo=&quot;}"
          id="2uTWataEmJkpdwM1" method="POST" novalidate="novalidate">
          <div class="form-error" data-error></div>
          <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
            <div class="form-column" style="grid-column-start: span 6;">

              <div class="form-field">

                <label class="form-label" for="2uTWataEmJkpdwM1/2c20deaa-6d7d-47b3-9233-9cdedc60ad6c">
                                        <span>First Name</span>
                                        <em>*</em>
                                    </label>

                <input class="form-input" id="2uTWataEmJkpdwM1/2c20deaa-6d7d-47b3-9233-9cdedc60ad6c" name="firstname" placeholder="First Name" required type="text">

                <span class="form-error" data-error="firstname"></span>
              </div>
            </div>
            <div class="form-column" style="grid-column-start: span 6;">

              <div class="form-field">

                <label class="form-label" for="2uTWataEmJkpdwM1/dab4ef21-9480-4799-85dc-2d8367fce737">
                                        <span>Last Name</span>
                                        <em>*</em>
                                    </label>

                <input class="form-input" id="2uTWataEmJkpdwM1/dab4ef21-9480-4799-85dc-2d8367fce737" name="lastname" placeholder="Last Name" required type="text">

                <span class="form-error" data-error="lastname"></span>
              </div>
            </div>
          </div>
          <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
            <div class="form-column" style="grid-column-start: span 12;">

              <div class="form-field">

                <label class="form-label" for="2uTWataEmJkpdwM1/e6cd37c1-28af-44a0-afa4-f0bfb12efb04">
                                        <span>Email</span>
                                        <em>*</em>
                                    </label>

                <input class="form-input" id="2uTWataEmJkpdwM1/e6cd37c1-28af-44a0-afa4-f0bfb12efb04" name="useremail" placeholder="Email" required type="email">

                <span class="form-error" data-error="useremail"></span>
              </div>
            </div>
          </div>
          <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
            <div class="form-column" style="grid-column-start: span 12;">

              <input type="text" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;" aria-hidden tabindex="-1" name="website">
              <div class="form-field">

                <button class="form-btn" hx-disabled-elt="this" type="submit">
                                        RSVP</button>

              </div>
            </div>
          </div>
        </form>
      </div>

    </div>

  </section>

</div>

<div class="form-container-m">

  <form action="https://cato-sports.com/forms/marathon-post-race-zone-berlin" class="form" enctype="application/x-www-form-urlencoded" hx-post="https://cato-sports.com/forms/marathon-post-race-zone-berlin" hx-swap="outerHTML show:top" hx-vals="{&quot;dreamform:page&quot;:&quot;h80pQ8H6sT9SlPUojuT4IXYdEMFVXCunyc9clapd+gxIN3qsOACUknhxQq8hwLJyxCYuLvwjbniiVqOnWGVoEasTPOF3Cto89d69bErRMec=&quot;,&quot;dreamform:attr&quot;:&quot;2ZNgxp74Hv6+AIcT5vQ+NCjdu4KNJzWIeDh8W42PQslFVsFr7Qu6SrZdSFeQw3sgKnShgMFIilVUKvtJeZ35rpVYtVE6LM3NUV7GuT7DoP4iHs1QqlSCk4vqqqvhCvTTHC4vxaufp7K2X4bj3dFz3LL+N5o5YxPJFLb7kdl0HGdnkL86N2abNV3vxNvUSx+rNgAw+LlFKbwb+cLbytjmICbhxHxHfoylG8Fou2upcjg1zuns272D/RrEHSOd9clegxon6bDHdK1rhH6JwU/AYUyj8gCM89W+OjCeHz7U0x6jF9sxKYIvrg4iIGa+ND3gyXnOUi/jasKHVO0oqwPsUT2OaHpgTwIHynDbYR03Szvy/3H1+2f+/+uIgtVCKuphi+fnBX5y5bU6b8tIF+M2uXfeWq6YBAoxG6eXq9HcVUuT5LMYxi1c03QXFXOgH/60JApaEyVyTQnkDNvGkdzASnbXdwtc7znr+ENpm2E7qdwfoMS5VSFZcycjdGctMxTyoWhAhUCWj1JZiCgWfqqtZgy0RMTIzk/Jpe1doDag6bHRaD0fPRXXPPy33SeeUIlUI/LkzHa3qCVo0URx2x2G8dZjPfzhpEfgszOCzrMwQ7CBDkIdeCQTPvr3ooun1lJuOLST6+1f5/TAZAl6ygL9nytlLrToHerAlR0wyLgSEf0X3NpLWAgMqLb5PKMxcguCa3F6QAfBfDd/NQy+Qf25I8tz4Lt1CTdqSpBylROrUiIngZbjZX5pJIHGOWRa/bVF+BQ8hgvQbCxYu7Jz1lEvGZZvxj35jEZZP8+Z67ZGAUWPM1WsYKFTBk7HMgcNHGy5KHl4j2MwN9GDl78P9imOtJbCcmpFC7aGEXqxxgJQ3SBMACIIvAugkokpNe6ix1oBcbPTM9xuu2poXppR4nr/U8pr7LkAhP2ydP/Aqe3B0YEgA1Cfz+0FRlGqYOfqzI7wJrER8XMFu/mgs4Rf+7jHYN92azm73c5Rff2LbDU1adATVWARX3VWunfdwVVtxrir4o38mDxrjuTzaYn/MjUK4yhLftdUXq8sMXpJjisrY6o=&quot;}"
    id="2uTWataEmJkpdwM1" method="POST" novalidate="novalidate">
    <div class="form-error" data-error></div>
    <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
      <div class="form-column" style="grid-column-start: span 6;">

        <div class="form-field">

          <label class="form-label" for="2uTWataEmJkpdwM1/2c20deaa-6d7d-47b3-9233-9cdedc60ad6c">
                            <span>First Name</span>
                            <em>*</em>
                        </label>

          <input class="form-input" id="2uTWataEmJkpdwM1/2c20deaa-6d7d-47b3-9233-9cdedc60ad6c" name="firstname" placeholder="First Name" required type="text">

          <span class="form-error" data-error="firstname"></span>
        </div>
      </div>
      <div class="form-column" style="grid-column-start: span 6;">

        <div class="form-field">

          <label class="form-label" for="2uTWataEmJkpdwM1/dab4ef21-9480-4799-85dc-2d8367fce737">
                            <span>Last Name</span>
                            <em>*</em>
                        </label>

          <input class="form-input" id="2uTWataEmJkpdwM1/dab4ef21-9480-4799-85dc-2d8367fce737" name="lastname" placeholder="Last Name" required type="text">

          <span class="form-error" data-error="lastname"></span>
        </div>
      </div>
    </div>
    <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
      <div class="form-column" style="grid-column-start: span 12;">

        <div class="form-field">

          <label class="form-label" for="2uTWataEmJkpdwM1/e6cd37c1-28af-44a0-afa4-f0bfb12efb04">
                            <span>Email</span>
                            <em>*</em>
                        </label>

          <input class="form-input" id="2uTWataEmJkpdwM1/e6cd37c1-28af-44a0-afa4-f0bfb12efb04" name="useremail" placeholder="Email" required type="email">

          <span class="form-error" data-error="useremail"></span>
        </div>
      </div>
    </div>
    <div class="form-row" style="display: grid; grid-template-columns: repeat(12, 1fr);">
      <div class="form-column" style="grid-column-start: span 12;">

        <input type="text" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;" aria-hidden tabindex="-1" name="website">
        <div class="form-field">

          <button class="form-btn" hx-disabled-elt="this" type="submit">
                            RSVP</button>

        </div>
      </div>
    </div>
  </form>
</div>

我希望这里有人能帮我解决这个问题，因为我很困惑是什么让 Instagram 的渲染方式与任何其他浏览器/浏览器大小不同......（我已经清除了缓存等......）

谢谢你

php html css mobile instagram
1个回答
0
投票

尝试根据媒体查询显式显示和隐藏。还要添加 !important，以防 Instagram Web 视图中存在覆盖 CSS 的情况

/* Default: Show desktop form, hide mobile form */
.form-container {
  display: block !important;
}
.form-container-m {
  display: none !important; 
}
/* Mobile: Show mobile form, hide desktop form */
@media only screen and (max-width: 800px) {
  .form-container {
    display: none !important;
  }
  .form-container-m {
    display: block !important;
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.