Как выполнить две разные функции в зависимости от размера экрана, рабочего стола против мобильного? ⇐ Javascript

[Anonymous]

Я сделал простой веб -сайт Flip Book, и теперь я пытаюсь сделать его более отзывчивым для мобильных устройств. Когда пользователь находится на рабочем столе, книга переводится (переворачивается) на оси Y. Когда пользователь находится на мобильных устройствах, я хочу, чтобы книга переводила на оси x, как блокнот. Я попытался настроить оператор if для того, когда размер экрана менее чем за 870 px для перевода на оси x, но я получил ошибку, и ничего не происходит.
Line 21-45-моя функция для мобильных устройств и строки 51-57 Является ли моя функция для настольного компьютера.
может помочь? >

Код: Выделить всё

// References to DOM Elements
const prevBtn = document.querySelector("#prev-btn");
const nextBtn = document.querySelector("#next-btn");
const book = document.querySelector("#book");

const paper1 = document.querySelector("#p1");
const paper2 = document.querySelector("#p2");
const paper3 = document.querySelector("#p3");
const paper4 = document.querySelector("#p4");

// Event Listener
prevBtn.addEventListener("click", goPrevPage);
nextBtn.addEventListener("click", goNextPage);

// Business Logic
let currentLocation = 1;
let numOfPapers = 4;
let maxLocation = numOfPapers + 1;

let onMobile;
const resizeEvent = fuction(){
if(window.innerWidth  1) {
switch(currentLocation) {
case 2:
closeBook(true);
paper1.classList.remove("flipped");
paper1.style.zIndex = 4;
break;
case 3:
paper2.classList.remove("flipped");
paper2.style.zIndex = 3;
break;
case 4:
openBook();
paper3.classList.remove("flipped");
paper3.style.zIndex = 2;
break;
case 5:
openBook();
paper4.classList.remove("flipped");
paper4.style.zIndex = 1;
break;

default:
throw new Error("unkown state");
}

currentLocation--;
}
}

export const setPlaceholderText = () =>  {
const input = document.getElementById("")
}< /code>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-color: powderblue;
}

/* Book */
.book {
position: relative;
width: 550px;
height: 700px;
transition: transform 0.5s;

}

.paper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
perspective: 1500px;

}

.front,
.back {
background-color: white;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left;
transition: transform 0.5s;
}

.front {
z-index: 1;
backface-visibility: hidden;
border-left: 3px solid powderblue;
}

.back {
z-index: 0;
}

.front-content,
.back-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.back-content {
transform: rotateY(180deg)
}

/* Paper flip effect */
.flipped .front,
.flipped .back {
transform: rotateY(-180deg);
}

/* Controller Buttons */
button {
border: none;
background-color: transparent;
cursor: pointer;
margin: 100px;
transition: transform 0.5s;
}

button:focus {
outline: none;
}

button:hover i {
color: #636363;
}

i {
font-size: 50px;
color: gray;
}

/* Paper stack order */
#p1 {
z-index: 4;
}

#p2 {
z-index: 3;
}

#p3 {
z-index: 2;
}

#p4 {
z-index: 1;
}

@media ( max-width: 870px){

.book {
position: relative;
right:10px;
width: 450px;
height: 600px;
transition: transform 0.5s;

}
button {
margin: 5px;
}

.back-content {
transform: rotateX(180deg)
}

/* Paper flip effect */
.flipped .front,
.flipped .back {
transform:  rotateX(-180deg);
}

}< /code>






Book







[img]back.png[/img]








Front 1




Back 1







Front 2




Back 2







Front 3




Back 3







Front 4




Back 4








[img]next.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/794 ... top-vs-mob