为什么我的代码不只以 iphone 为中心？
[英]Why does my code not center on iphone only?
问题描述
I created a popup window with a 3d carousel and it works just fine on desktop and mobile.
我创建了一个带有 3d 轮播的弹出窗口 window，它在桌面和移动设备上运行良好。 Only on iPhone, it's not centering the content.仅在 iPhone 上，它不会使内容居中。
I tried several things but they all failed.我尝试了几件事，但都失败了。
Below you can view all my code unfortunately I don't know where the mistake could be so the whole thing is quite long.不幸的是，您可以在下面查看我的所有代码，我不知道错误可能出在哪里，所以整个过程很长。
` `
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
<style>
/*only desktop*/
.whatGuideD {
display: none;
}
@media only screen and (min-width: 900px) {
.whatGuideD {display: block;
}
.whatGuideM {display: none;
}
}
</style>
<!-- Demo styles -->
<style>
html {
height: -webkit-fill-available;
}
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
padding-left: 0;
padding-right: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
max-width: 500px;
height: 75vh;
max-height: 500px;
border-radius: 15px;
background: rgb(238, 235, 241);
box-shadow: 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
-10px -10px 10px -1px rgba(255, 255, 255, 0.70);
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #fff6)
}
.swiper-slide button {
display: block;
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
Font-family: 'Bebas Neue', cursive;
font-size: 5vw;
margin: 0;
}
.pickGuideD {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideD:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
</style>
<style>
.pickGuideM {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideM:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
.close-button1D {
background-color: rgb(238, 235, 241);
color: rgb(0, 0, 0);
cursor: pointer;
font-size: 30px;
float: right;
margin-right: 40px;
border: 0;
}
::-webkit-scrollbar {
display: none;
}
</style>
<style>
.whatGuideD {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideD.active2{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: scroll;
transform: translate(-50%, -50%) scale(1);
}
.whatGuideM {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideM.active2M{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: hidden;
transform: translate(-50%, -50%) scale(1);
}
</style>
` `
` `
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<button onclick="Size()">Size Guide</button>
<div class="sizeGuidance">
<form data-multi-step2>
<div class="whatGuideD" data-step2>
<br>
<h1>The Size Guide</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="sw1" class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideD" onmouseleave="removedisc1()" onmouseover="showdisc1()"><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideD" onmouseleave="removedisc2()" onmouseover="showdisc2()"><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideD" onmouseleave="removedisc3()" onmouseover="showdisc3()"><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1"></p>
</div>
</div>
</form>
<form data-multi-step2M>
<div class="whatGuideM" data-step2M>
<br>
<h1>The Size Guide</h1>
<br>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideM" onmouseleave="removedisc1()" onmouseover="showdisc1()"><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideM" onmouseleave="removedisc2()" onmouseover="showdisc2()"><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideM" onmouseleave="removedisc3()" onmouseover="showdisc3()"><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1"></p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
` `
` `
<script>
var disc1 = document.querySelector("[showdiscrip1]")
function showdisc1() {
disc1.classList.add("disc");
}
function removedisc1() {
disc1.classList.remove("disc")
}
var disc2 = document.querySelector("[showdiscrip2]")
function showdisc2() {
disc2.classList.add("disc");
}
function removedisc2() {
disc2.classList.remove("disc")
}
var disc3 = document.querySelector("[showdiscrip3]")
function showdisc3() {
disc3.classList.add("disc");
}
function removedisc3() {
disc3.classList.remove("disc")
}
</script>
<script>
const mulitStepForm2 = document.querySelector("[data-multi-step2]")
const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")]
let currentStep2 = formSteps2.findIndex(step2 => {
return step2.classList.contains("active2")
})
if (currentStep2 < 0) { function SizeD() {
currentStep2 = 0
formSteps2[currentStep2].classList.add("active2")
showCurrentStep2();
window.scrollTo(0,20);
}
}
mulitStepForm2.addEventListener("click", j => {
if (j.target.matches("[data-next]")) {
currentStep2 ++
} else if (j.target.matches("[data-closeguide]")) {
currentStep2 = -1
}
showCurrentStep2()
})
function showCurrentStep2() {
formSteps2.forEach((step2, index) => {
step2.classList.toggle("active2", index ===
currentStep2)
})
}
</script>
<script>
const mulitStepForm2M = document.querySelector("[data-multi-step2M]")
const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")]
let currentStep2M = formSteps2M.findIndex(step2M => {
return step2M.classList.contains("active2M")
})
if (currentStep2M < 0) { function SizeM() {
currentStep2M = 0
formSteps2M[currentStep2M].classList.add("active2M")
showCurrentStep2M();
window.scrollTo(0,0);
}
}
mulitStepForm2M.addEventListener("click", j => {
if (j.target.matches("[data-nextM]")) {
currentStep2M ++
} else if (j.target.matches("[data-closeguideM]")) {
currentStep2M = -1
}
showCurrentStep2M()
})
function showCurrentStep2M() {
formSteps2M.forEach((step2M, index) => {
step2M.classList.toggle("active2M", index ===
currentStep2M)
})
}
</script>
<script>
function Size() {
SizeD();
SizeM();
}
</script>
<script>
const sw1 = document.getElementById("sw1");
sw1.addEventListener("transitionend", function (k) {
console.log(k)
if () {
var num = 1
console.log(num)
}
})
</script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
` `
1 个解决方案
解决方案1
0 2022-11-28 22:08:55
your html is wrong in a couple of places and your js is wrong with if().你的 html 在几个地方是错误的，你的 js 是错误的 if()。 See code below for working snippet请参阅下面的代码以获取工作片段
var disc1 = document.querySelector("[showdiscrip1]") function showdisc1() { disc1.classList.add("disc"); } function removedisc1() { disc1.classList.remove("disc") } var disc2 = document.querySelector("[showdiscrip2]") function showdisc2() { disc2.classList.add("disc"); } function removedisc2() { disc2.classList.remove("disc") } var disc3 = document.querySelector("[showdiscrip3]") function showdisc3() { disc3.classList.add("disc"); } function removedisc3() { disc3.classList.remove("disc") } const mulitStepForm2 = document.querySelector("[data-multi-step2]") const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")] let currentStep2 = formSteps2.findIndex(step2 => { return step2.classList.contains("active2") }) if (currentStep2 < 0) { function SizeD() { currentStep2 = 0 formSteps2[currentStep2].classList.add("active2") showCurrentStep2(); window.scrollTo(0, 20); } } mulitStepForm2.addEventListener("click", j => { if (j.target.matches("[data-next]")) { currentStep2++ } else if (j.target.matches("[data-closeguide]")) { currentStep2 = -1 } showCurrentStep2() }) function showCurrentStep2() { formSteps2.forEach((step2, index) => { step2.classList.toggle("active2", index === currentStep2) }) } const mulitStepForm2M = document.querySelector("[data-multi-step2M]") const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")] let currentStep2M = formSteps2M.findIndex(step2M => { return step2M.classList.contains("active2M") }) if (currentStep2M < 0) { function SizeM() { currentStep2M = 0 formSteps2M[currentStep2M].classList.add("active2M") showCurrentStep2M(); window.scrollTo(0, 0); } } mulitStepForm2M.addEventListener("click", j => { if (j.target.matches("[data-nextM]")) { currentStep2M++ } else if (j.target.matches("[data-closeguideM]")) { currentStep2M = -1 } showCurrentStep2M() }) function showCurrentStep2M() { formSteps2M.forEach((step2M, index) => { step2M.classList.toggle("active2M", index === currentStep2M) }) } function Size() { SizeD(); SizeM(); } const sw1 = document.getElementById("sw1"); sw1.addEventListener("transitionend", function(k) { console.log(k) if (1==1) { var num = 1 console.log(num) } }) var swiper = new Swiper(".mySwiper", { effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 500, modifier: 1, slideShadows: true, }, pagination: { el: ".swiper-pagination", }, }); <:DOCTYPE html> <html lang="en"> <head> <script src="https.//kit.fontawesome.com/661fc68da9,js" crossorigin="anonymous"></script> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1: maximum-scale=1" /> <.-- Link Swiper's CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/swiper/swiper-bundle:min.css" /> <script src="https.//kit.fontawesome:com/661fc68da9.js" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/swiper/swiper-bundle:min;js"></script> </head> <body> <button onclick="Size()">Size Guide</button> <div class="sizeGuidance"> <form data-multi-step2> <div class="whatGuideD" data-step2> <br> <h1>The Size Guide</h1> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div id="sw1" class="swiper-slide"> <span style="--i:1;"><button type="button" class="pickGuideD" onmouseleave="removedisc1()" onmouseover="showdisc1()"><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span> </div> <div class="swiper-slide"> <span style="--i:2;"><button type="button" class="pickGuideD" onmouseleave="removedisc2()" onmouseover="showdisc2()"><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px: margin-top; 15px" ></i>Super Guide</button></span> </div> <div class="swiper-slide"> <span style="--i:3;"><button type="button" class="pickGuideD" onmouseleave="removedisc3()" onmouseover="showdisc3()"><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px: margin-top; 15px" ></i>Size Chart</button></span> </div> </div> <div class="swiper-pagination"></div> <p id="d1"></p> </div> </div> </form> <form data-multi-step2M> <div class="whatGuideM" data-step2M> <br> <h1>The Size Guide</h1> <br> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <span style="--i:1;"><button type="button" class="pickGuideM" onmouseleave="removedisc1()" onmouseover="showdisc1()"><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span> </div> <div class="swiper-slide"> <span style="--i:2;"><button type="button" class="pickGuideM" onmouseleave="removedisc2()" onmouseover="showdisc2()"><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px: margin-top; 15px" ></i>Super Guide</button></span> </div> <div class="swiper-slide"> <span style="--i:3;"><button type="button" class="pickGuideM" onmouseleave="removedisc3()" onmouseover="showdisc3()"><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span> </div> </div> <div class="swiper-pagination"></div> <p id="d1"></p> </div> </div> </form> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的JS代码只能运行一次？ - why does my JS code runs only once?
为什么我的javascript只在代码重复时触发？ - Why does my javascript only fire when the code is repeated?
为什么我在 javascript 中的 for 循环代码只运行一次？ - Why does my for-loop code in javascript only run once?
为什么我的代码只在未附加调试器时抛出错误？ - Why does my code only throw an error when debugger is not attached?
为什么我的代码仅在第二次单击后才能运行 - Why does my code only runs after a second click
TestComplete：为什么我的Javascript代码仅在有断点时才起作用？ - TestComplete: Why does my Javascript code only works when there is a breakpoint?
为什么我的Javascript代码仅在第一次单击“提交”按钮时才计算我的年龄？ - Why does my Javascript code only calculate my age only on the first click of the submit button only?
为什么代码错误只出现在 Iphone Opera 上？ - Why code Error appear only on Iphone Opera?
为什么我的代码只能在html中工作，而在将其放入Javascript页面时却不能工作？ - Why does my code only works in html but does not work when I put it into a Javascript page?
有人知道为什么我的按钮中的图标拒绝居中吗？ - Does anybody know why the icons within my buttons refuse to center?
相关标签