Skip to content

Instantly share code, notes, and snippets.

@sunmeat
Created November 7, 2025 15:03
Show Gist options
  • Select an option

  • Save sunmeat/3df30207d2249c2385352e9123801dfd to your computer and use it in GitHub Desktop.

Select an option

Save sunmeat/3df30207d2249c2385352e9123801dfd to your computer and use it in GitHub Desktop.
adaptive design
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивний сайт</title>
<!-- базовий CSS, якщо потрібно -->
</head>
<body>
<h1>Виявлення пристрою...</h1>
<!-- cкрипт для перенаправлення -->
<script>
// функція для перевірки розміру екрана та перенаправлення
function detectAndRedirect() {
const screenWidth = window.innerWidth; // або screen.width для повної ширини екрана
if (screenWidth < 768) {
// смартфон: завантажуємо сторінку для мобільних
window.location.href = 'smartphone.html';
} else if (screenWidth >= 768 && screenWidth < 1024) {
// планшет: завантажуємо сторінку для планшетів
window.location.href = 'tablet.html';
} else {
// десктоп: наприклад, завантажуємо планшетну або окрему desktop.html
window.location.href = 'tablet.html'; // Або 'desktop.html'
}
}
// викликаємо при завантаженні сторінки
window.addEventListener('load', detectAndRedirect);
// додатково: обробка зміни орієнтації або розміру вікна (опціонально)
window.addEventListener('resize', detectAndRedirect);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment