dir.by  
  Поиск  
Программирование, разработка, тестирование
Html & CSS
Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
  Посмотрели 4315 раз(а)    
 Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML | стандарт ES5 
Чтобы самому определить мобильное устройство нужно взять navigator.userAgent
Будем искать названия и если найдём, то это и будет устройство.
Пример
  Html     Файл example.html
<html>
<body>

     <script>
          const devices = new RegExp('Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini', "i");

          if (devices.test(navigator.userAgent))
          {
               alert("Вы используете мобильное устройство (телефон или планшет).")
          }
          else
          {
               alert("Вы используете ПК.")
          }
     </script>

</body>
</html>
Определяем мобильное устройство используя библиотеку mobile-detect.js
  Html     Файл example.html
<html>
<body>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.4/mobile-detect.min.js"></script>

     <script>
          let detect = new MobileDetect(window.navigator.userAgent);

          if (detect.phone())
          {
               alert("телефон ")
          }

          else if (detect.tablet())
          {
               alert("планшет")
          }

          else if (detect.mobile())
          {
               alert("телефон или планшет")
          }

          else if (detect.os())
          {
               alert("операционная система")
          }

          else if (detect.userAgent())
          {
               alert("userAgent")
          }
     </script>

</body>
</html>
 
Читаем подробнее документацию: MobileDetect(userAgent, maxPhoneWidthopt) ...
 
 
← Предыдущая тема
Что такое Front-end разработка?
 
Следующая тема →
Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Картинки

Объявления
Объявления
Html & CSS  
HTML элементы
HTML тег <a> ссылка для перехода на другую страницу
HTML тег <abbr> показывает сокращенное название, если подвести мышку будет всплывающая надпись
HTML теги fieldset и legend. Это рамка с заголовком
HTML тег <!-- --> комментарий
style="border" В HTML

HTML поиск элемента, элементов
document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (векторная графика для рисования линий, прямоугольников, эллипсов, ...)
<svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

HTML canvas (рисование картинок, текста, фигур)
HTML <canvas> рисуем прямоугольник
HTML <canvas> рисуем картинки
HTML <canvas> рисуем картинку с поворотом
HTML <canvas> рисуем картинку с горизонтальным отражением
HTML <canvas> рисуем картинку и текст
HTML <canvas> рисуем картинку много раз в прямоугольнике (шаблон)
HTML <canvas> как получить координаты мыши ? Определяем позицию мыши.
HTML <canvas> рисуем змею линиями moveTo, lineTo
CSS
CSS описание
После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?
Книги для изучения CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
Что такое CSS flex
Freeze
Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Делаем Popup используя HTML и Javascript
Как сделать Popup окно в HTML странице | Javascript, HTML, CSS
Движение и анимация картинок
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Верстка, дизайн страницы
Что такое Front-end разработка?
Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
Как сделать чтобы ваш сайт соответствовал по размерам на телефоне, планшете ? (HTML meta с атрибутом name='viewport')
Правильная верстка HTML. Плохо использовать table. Нужно использовать div
Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW сайты для изучения
Сайты для изучения HTML

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика