dir.by  
  Поиск  
Компьютер, программы
Html & CSS
 How to identify a device (tablet, computer, phone) that is currently used in JavaScript, HTML | ES5 standard 
Чтобы самому определить мобильное устройство нужно взять navigator.userAgent
Будем искать названия и если найдём, то это и будет устройство.
Example
  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) ...
 
 
← Previous topic
What the Front-end development?
 
Next topic →
How to make your site work on a phone, tablet, computer using css media and max-device-width and min-device-width | HTML | CSS
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
HTML elements
HTML tag <a> link to go to another page
HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription
HTML tags fieldset and legend. This is a frame with a title
HTML tag <!-- --> comment
style="border" in the HTML
<BR>
HTML search for an element, elements
document.querySelector(...) is a JavaScript method for finding an element from document (i.e. in all HTML)
yourElement.querySelectorAll(...) is a JavaScript method for finding elements inside another HTML element
<BR>
HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)
<svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>
<BR>
HTML canvas (drawing pictures, text, shapes)
HTML <canvas> drawing a rectangle
HTML drawing <canvas> lines by clicking on the Canvas
HTML <canvas> we draw pictures
HTML <canvas> we draw a picture with a rotation
HTML <canvas> draw a picture with horizontal reflection
HTML <canvas> we draw a picture and text
HTML <canvas> draw a picture many times in a rectangle (template)
HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.
HTML <canvas> drawing a snake with lines moveTo, lineTo
CSS
CSS description
After modifying the file css , the browser displays old styles over and over again. Why?
Books to study CSS
CSS flex (the element can stretch or shrink and thus fill the free space)
What is CSS flex
Freeze
The header in the table is always visible when scrolling | freeze header in table | HTML
Div is always visible when scrolling (position:fixed, position:sticky) | freeze div | HTML
Do Popup using HTML and Javascript
How to make a Popup window in a HTML page | Javascript, HTML, CSS
Motion and animation of pictures
Animation of the little man on the spot. For <div>animation, we use CSS styles: "animation", "background-image", "background-position", "keyframes"
Animation of a man in motion (sprite). For <div><img>animation we use CSS styles: "animation", "background-image", "background-position", "keyframes"
Draw a picture with movement. Use the HTML element<canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Drawing a picture with movement and animation (sprite). Use the HTML element <canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web page on the phone
I open a web page on my phone in Google Chrome. Why does double-clicking increase the page size?
Layout, page design
What the Front-end development?
How to Identify a Device (Tablet, Computer, Phone) Currently Used in JavaScript, HTML
How to make your site work on a phone, tablet, computer using css media and max-device-width and min-device-width | HTML | CSS
How to make your website fit in size on your phone, tablet? (HTML meta with attribute name="viewport")
Correct layout HTML. Bad to use table. You need to use div
What is Adaptive design? What is responsive design?
Change the color of the scrollbar for the HTML page. Using CSS
WWW sites for learning
Sites to explore HTML

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