Полноэкранный нажмите Mobile ⇐ Html

[Anonymous]

Я хочу программировать простое веб -приложение для нашего спортивного клуба и использовал 100% код CHATGPTS для этого приложения, потому что у меня нет никакого представления о том, как работать с HTML.
Цель веб -сайта:
Имеет 2 таймера и запустить /остановить их при нажатии. Но только в полноэкранном режиме. Веб-сайт отлично работает на рабочем столе Brwosers, но не на мобильных телефонах (в моем случае ios safari) я не могу открыть один из таймеров в полноэкранном режиме, поэтому я не могу их использовать, и Chatgpt не может решить эту проблему.
Я надеюсь, что кто-то может предоставить мне исправление, вот код: < /p>
"divepet-code =" navipt-code = />

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

Mobile Timer

body {
margin: 0;
padding: 1rem;
font-family: sans-serif;
background: #f4f4f4;
text-align: center;
}

.timer {
background: white;
border-radius: 12px;
padding: 2rem 1rem;
margin: 1.2rem auto;
width: 90%;
max-width: 320px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
font-size: 3rem;
user-select: none;
cursor: pointer;
}

.controls {
margin-top: 2rem;
}

.controls input {
font-size: 1.2rem;
width: 80px;
padding: 0.5rem;
text-align: center;
}

.controls button {
margin-top: 1rem;
padding: 0.8rem 1.5rem;
font-size: 1.1rem;
border: none;
border-radius: 6px;
background-color: #28a745;
color: white;
cursor: pointer;
}

.controls button:hover {
background-color: #1e7e34;
}



Two Timer – Mobile

03:00
03:00

minutes:



Reset


const timers = [
{ time: 180, running: false, interval: null, element: document.getElementById("timer1") },
{ time: 180, running: false, interval: null, element: document.getElementById("timer2") }
];

function format(seconds) {
const m = String(Math.floor(seconds / 60)).padStart(2, '0');
const s = String(seconds % 60).padStart(2, '0');
return `${m}:${s}`;
}

function updateDisplay(i) {
timers[i].element.textContent = format(timers[i].time);
}

function start(i) {
if (timers[i].running) return;
timers[i].running = true;
timers[i].interval = setInterval(() => {
if (timers[i].time > 0) {
timers[i].time--;
updateDisplay(i);
} else {
stop(i);
}
}, 1000);
}

function stop(i) {
timers[i].running = false;
clearInterval(timers[i].interval);
}

function resetTimers() {
const min = parseInt(document.getElementById("setMinutes").value) || 3;
timers.forEach((t, i) => {
stop(i);
t.time = min * 60;
updateDisplay(i);
});
}

// Touch = first Fullscreen, then start/stop
function handleTimerTap(i) {
const el = timers[i].element;

// if not fullscreen → go instant in fullscreen
if (!(document.fullscreenElement || document.webkitFullscreenElement)) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
}
return; // fullscreen-request
}

// If Fullscreen, start/stop
if (timers[i].running) {
stop(i);
} else {
start(i);
}
}

timers.forEach((t, i) => {
t.element.addEventListener("click", () => handleTimerTap(i));
});

resetTimers();

Подробнее здесь: https://stackoverflow.com/questions/797 ... ick-mobile