Определение устройства в JavaScript: методы для адаптивного дизайна

function detectDeviceType() {
const userAgent = navigator.userAgent.toLowerCase();

const isMobile = /iphone|ipad|ipod|android|blackberry|windows phone/g.test(userAgent);
const isTablet = /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);

if (isTablet) {
return 'tablet';
} else if (isMobile) {
return 'mobile';
}

return 'desktop';
}

console.log('Тип устройства: ' + detectDeviceType());

function getDeviceDetails() {
const ua = navigator.userAgent;
let deviceInfo = {
type: 'unknown',
os: 'unknown',
browser: 'unknown'
};

// Определение типа устройства
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(ua)) {
deviceInfo.type = 'tablet';
} else if (/mobile|iphone|ipod|blackberry|opera mini|iemobile|wpdesktop/i.test(ua)) {
deviceInfo.type = 'mobile';
} else {
deviceInfo.type = 'desktop';
}

// Определение ОС
if (/android/i.test(ua)) {
deviceInfo.os = 'Android';
} else if (/ipad|iphone|ipod/i.test(ua)) {
deviceInfo.os = 'iOS';
} else if (/windows/i.test(ua)) {
deviceInfo.os = 'Windows';
} else if (/mac/i.test(ua)) {
deviceInfo.os = 'MacOS';
} else if (/linux/i.test(ua)) {
deviceInfo.os = 'Linux';
}

// Определение браузера
if (/chrome/i.test(ua)) {
deviceInfo.browser = 'Chrome';
} else if (/firefox/i.test(ua)) {
deviceInfo.browser = 'Firefox';
} else if (/safari/i.test(ua)) {
deviceInfo.browser = 'Safari';
} else if (/msie|trident/i.test(ua)) {
deviceInfo.browser = 'IE';
} else if (/edge/i.test(ua)) {
deviceInfo.browser = 'Edge';
}

return deviceInfo;
}

console.log(getDeviceDetails());

function getDeviceType() {
const isMobile = window.matchMedia("(max-width: 767px)").matches;
const isTablet = window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches;
const isDesktop = window.matchMedia("(min-width: 1024px)").matches;

if (isMobile) {
return "mobile";
} else if (isTablet) {
return "tablet";
} else if (isDesktop) {
return "desktop";
}

return "unknown";
}

console.log("Текущий тип устройства: " + getDeviceType());

function setupResponsiveListeners() {
// Определяем медиа-запросы для разных типов устройств
const mobileQuery = window.matchMedia('(max-width: 767px)');
const tabletQuery = window.matchMedia('(min-width: 768px) and (max-width: 1023px)');
const desktopQuery = window.matchMedia('(min-width: 1024px)');

// Функция обработчик
function handleDeviceChange(e) {
if (mobileQuery.matches) {
console.log('Переключение на мобильную версию');
// Код для адаптации под мобильные устройства
document.body.classList.remove('tablet', 'desktop');
document.body.classList.add('mobile');
} else if (tabletQuery.matches) {
console.log('Переключение на планшетную версию');
// Код для адаптации под планшеты
document.body.classList.remove('mobile', 'desktop');
document.body.classList.add('tablet');
} else if (desktopQuery.matches) {
console.log('Переключение на десктопную версию');
// Код для адаптации под десктоп
document.body.classList.remove('mobile', 'tablet');
document.body.classList.add('desktop');
}
}

// Добавляем слушатели событий
mobileQuery.addListener(handleDeviceChange);
tabletQuery.addListener(handleDeviceChange);
desktopQuery.addListener(handleDeviceChange);

// Вызываем обработчик сразу для установки начального состояния
handleDeviceChange();
}

// Запускаем настройку при загрузке страницы
document.addEventListener('DOMContentLoaded', setupResponsiveListeners);

// Подключаем библиотеку device.js
// <script src="path/to/device.js"></script>

// Проверяем тип устройства
if (device.mobile()) {
console.log('Это мобильное устройство');
// Включаем специфичный для мобильных код
} else if (device.tablet()) {
console.log('Это планшет');
// Включаем специфичный для планшетов код
} else if (device.desktop()) {
console.log('Это десктопное устройство');
// Включаем специфичный для десктопов код
}

// Определяем ориентацию
if (device.landscape()) {
console.log('Ландшафтная ориентация');
} else if (device.portrait()) {
console.log('Портретная ориентация');
}

// Определяем конкретную ОС
if (device.ios()) {
console.log('iOS устройство');
} else if (device.android()) {
console.log('Android устройство');
} else if (device.windows()) {
console.log('Windows устройство');
}

// Подключаем библиотеку mobile-detect.js
// <script src="path/to/mobile-detect.min.js"></script>

// Инициализируем MobileDetect
const md = new MobileDetect(window.navigator.userAgent);

// Получаем полную информацию
console.log('Мобильное устройство: ', md.mobile()); // Возвращает название устройства или null
console.log('Планшет: ', md.tablet()); // Возвращает название планшета или null
console.log('ОС: ', md.os()); // Возвращает название ОС
console.log('Это iPhone? ', md.is('iPhone')); // true/false
console.log('Это Samsung? ', md.is('Samsung')); // true/false
console.log('Версия iOS: ', md.versionStr('iOS')); // Возвращает версию iOS
console.log('Версия Android: ', md.versionStr('Android')); // Возвращает версию Android

// Проверка конкретных условий
if (md.mobile() && !md.tablet()) {
console.log('Это смартфон');
} else if (md.tablet()) {
console.log('Это планшет');
} else {
console.log('Это десктоп');
}

// Определение версии ОС для условной логики
const androidVersion = md.version('Android');
if (androidVersion && androidVersion >= 9) {
console.log('Это Android 9.0 или выше');
}

// Подключаем библиотеку UAParser.js
// <script src="path/to/ua-parser.min.js"></script>

// Инициализируем парсер
const parser = new UAParser();
const result = parser.getResult();

// Получаем детальную информацию
console.log('Браузер: ', result.browser.name, result.browser.version);
console.log('Операционная система: ', result.os.name, result.os.version);
console.log('Устройство: ', result.device.vendor, result.device.model, result.device.type);
console.log('CPU: ', result.cpu.architecture);

// Проверка типа устройства
if (result.device.type === 'mobile') {
// Мобильная версия
} else if (result.device.type === 'tablet') {
// Планшетная версия
} else {
// Десктопная версия
}

// Определяем тип устройства и адаптируем интерфейс
document.addEventListener('DOMContentLoaded', function() {
// Используем комбинацию подходов для надежного определения
const isMobile = window.matchMedia('(max-width: 767px)').matches || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const isTablet = window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches || (/iPad|Tablet|Playbook|Silk|(Android(?!.*Mobile))/i.test(navigator.userAgent));

// Добавляем класс для CSS-адаптации
if (isMobile) {
document.body.classList.add('mobile-device');
} else if (isTablet) {
document.body.classList.add('tablet-device');
} else {
document.body.classList.add('desktop-device');
}

// Адаптируем навигацию
const navMenu = document.getElementById('main-nav');
if (isMobile) {
// Создаем мобильное меню-бургер
const mobileMenu = document.createElement('div');
mobileMenu.className = 'mobile-menu';
mobileMenu.innerHTML = '<span></span><span></span><span></span>';

navMenu.parentNode.insertBefore(mobileMenu, navMenu);
navMenu.classList.add('hidden');

// Добавляем обработчик для тач-событий
mobileMenu.addEventListener('touchend', function() {
navMenu.classList.toggle('hidden');
});
}

// Адаптируем галерею изображений
const gallery = document.querySelector('.image-gallery');
if (gallery) {
const images = gallery.querySelectorAll('img');

if (isMobile) {
// Для мобильных устройств загружаем изображения с меньшим разрешением
images.forEach(img => {
if (img.dataset.mobileSrc) {
img.src = img.dataset.mobileSrc;
}
});

// Изменяем вывод галереи на одноколоночный
gallery.classList.add('mobile-gallery');
} else if (isTablet) {
// Для планшетов используем среднее разрешение
images.forEach(img => {
if (img.dataset.tabletSrc) {
img.src = img.dataset.tabletSrc;
}
});

// Двухколоночная галерея для планшетов
gallery.classList.add('tablet-gallery');
}
}

// Адаптируем формы ввода
const forms = document.querySelectorAll('form');
if (isMobile || isTablet) {
forms.forEach(form => {
// Увеличиваем размер полей ввода для удобства на сенсорных экранах
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
input.classList.add('touch-friendly');
});

// Для мобильных упрощаем сложные формы
if (isMobile && form.classList.contains('complex-form')) {
const fieldsets = form.querySelectorAll('fieldset');
if (fieldsets.length > 1) {
// Создаем пошаговую форму
createStepByStepForm(form, fieldsets);
}
}
});
}

// Адаптируем видео-плееры
const videoPlayers = document.querySelectorAll('.video-player');
videoPlayers.forEach(player => {
const video = player.querySelector('video');
if (video && isMobile) {
// Для мобильных устанавливаем низкое качество видео для экономии трафика
if (video.dataset.mobileSrc) {
video.src = video.dataset.mobileSrc;
}

// Отключаем автовоспроизведение на мобильных
video.autoplay = false;
}
});
});

// Функция для создания пошаговой формы
function createStepByStepForm(form, fieldsets) {
// Скрываем все fieldset, кроме первого
for (let i = 1; i < fieldsets.length; i++) {
fieldsets[i].style.display = 'none';
}

let currentStep = 0;

// Создаем кнопки навигации
const navButtons = document.createElement('div');
navButtons.className = 'form-navigation';

const prevButton = document.createElement('button');
prevButton.type = 'button';
prevButton.textContent = 'Назад';
prevButton.style.display = 'none';
prevButton.addEventListener('click', () => {
if (currentStep > 0) {
fieldsets[currentStep].style.display = 'none';
currentStep--;
fieldsets[currentStep].style.display = 'block';

if (currentStep === 0) {
prevButton.style.display = 'none';
}

nextButton.textContent = 'Далее';
}
});

const nextButton = document.createElement('button');
nextButton.type = 'button';
nextButton.textContent = 'Далее';
nextButton.addEventListener('click', () => {
if (currentStep < fieldsets.length – 1) {
fieldsets[currentStep].style.display = 'none';
currentStep++;
fieldsets[currentStep].style.display = 'block';

prevButton.style.display = 'inline-block';

if (currentStep === fieldsets.length – 1) {
nextButton.textContent = 'Отправить';
}
} else {
// На последнем шаге отправляем форму
form.submit();
}
});

navButtons.appendChild(prevButton);
navButtons.appendChild(nextButton);
form.appendChild(navButtons);
}

// Адаптивные обработчики событий
function setupAdaptiveEventHandlers() {
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
const elements = document.querySelectorAll('.interactive-element');

elements.forEach(element => {
if (isTouchDevice) {
// Для сенсорных устройств
element.addEventListener('touchstart', handleInteraction);
// Отменяем стандартный обработчик для предотвращения задержек
element.addEventListener('click', e => e.preventDefault());
} else {
// Для обычных устройств с мышью
element.addEventListener('click', handleInteraction);
// Можем добавить hover-эффекты
element.addEventListener('mouseenter', handleMouseEnter);
element.addEventListener('mouseleave', handleMouseLeave);
}
});
}

function handleInteraction(e) {
// Общая логика взаимодействия
console.log('Взаимодействие с элементом');
}

function handleMouseEnter(e) {
// Логика для hover-состояния
e.target.classList.add('hover');
}

function handleMouseLeave(e) {
// Возврат к нормальному состоянию
e.target.classList.remove('hover');
}