วิธีตรวจจับเบราว์เซอร์มือถือด้วย JavaScript

การตรวจจับมือถือเป็นส่วนสำคัญของการพัฒนาแอพมาโดยตลอด มันมีความเกี่ยวข้องทั้งสำหรับแอพ แต่ยังรวมถึงซอฟต์แวร์และเว็บไซต์ด้วย มีเหตุผลมากมายที่จะตรวจสอบตัวแทนเบราว์เซอร์มือถือ สิ่งสำคัญที่สุดคือความสามารถในการสร้างประสบการณ์ผู้ใช้ที่ไม่เหมือนใคร

ไลบรารี UAParser.js เพียงอย่างเดียวสามารถดาวน์โหลดแพ็คเกจรายสัปดาห์ได้หลายล้านครั้ง และในกรณีส่วนใหญ่ การสร้างบางสิ่งตั้งแต่เริ่มต้นก็เพียงพอแล้ว แต่วิธีอื่นในการตรวจหาเบราว์เซอร์มือถือด้วย JavaScript ล่ะ

บางครั้งคุณอาจต้องการวิธีแก้ปัญหาง่ายๆ ที่ทำงานโดยไม่มีไลบรารี่ และในบทความนี้ ผมจะนำเสนอเทคนิค JavaScript จำนวนหนึ่งสำหรับการตรวจหาผู้ใช้มือถือ แจ้งให้เราทราบหากฉันพลาด!

navigator.userAgent

จอกศักดิ์สิทธิ์ของการตรวจจับเบราว์เซอร์คือคุณสมบัติ navigator.UserAgent

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

แน่นอนว่านี่เป็นวิธีดั้งเดิมในการทำสิ่งนี้ สามารถจัดการได้อย่างง่ายดายเนื่องจากคุณสมบัติ User-Agent สามารถปลอมแปลงได้ แต่เนื่องจากใช้งานได้ดี คุณจึงสามารถใช้งานได้ในหลายโครงการ เช่น หน้า Landing Page หรือการเปลี่ยนเส้นทางแบบกำหนดเองไปยังเวอร์ชันมือถือ

วิธีใช้ navigator.userAgent เพื่อตรวจหาประเภทเบราว์เซอร์และแสดงเนื้อหาตามเบราว์เซอร์เฉพาะ

เอาล่ะ อาจมีกรณีการใช้งานเฉพาะที่คุณต้องการตรวจหาเบราว์เซอร์เฉพาะ เช่น Chrome และ Firefox (หรือในกรณีนี้คือ Android และ iPhone) จากนั้นใช้ข้อมูลนั้นเพื่อแสดงเนื้อหาเฉพาะ วิธีนี้มักใช้เพื่อจัดเตรียม/เปลี่ยนลิงก์ดาวน์โหลดสำหรับเบราว์เซอร์เฉพาะ

ในกรณีเช่นนี้ คุณสามารถใช้ฟังก์ชันต่อไปนี้ได้

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

คุณสามารถแสดงความคิดเห็น else if ข้อความสำหรับเบราว์เซอร์ที่คุณไม่ต้องการตรวจสอบ และในทำนองเดียวกัน คุณสามารถเพิ่มเบราว์เซอร์เพิ่มเติมที่คุณต้องการตรวจสอบได้

TouchEvent

วิธีหนึ่งในการตรวจจับผู้ใช้มือถือคือการตรวจสอบว่าอุปกรณ์มีหน้าจอสัมผัสหรือไม่

การใช้คุณสมบัติ GlobalEventHandlers.ontouchstart คุณสามารถตรวจสอบง่ายๆ เพื่อดูว่าผู้ใช้โต้ตอบกับแอปของคุณอย่างไร หากการโต้ตอบมาจากหน้าจอสัมผัส คุณสามารถส่งคืนแอพหรือเพจในเวอร์ชันมือถือได้

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

อุปกรณ์หน้าจอสัมผัส เช่น Surface ไม่มีคุณสมบัตินี้ ดังนั้น ผู้ใช้ที่มาจากอุปกรณ์ระบบสัมผัสบนเดสก์ท็อปจะยังเห็นหน้าเว็บของคุณในเวอร์ชันเดสก์ท็อป

Window.matchMedia()

Window.matchMedia() เป็นหนึ่งในคุณสมบัติที่ดีที่สุดในการตรวจจับผู้ใช้มือถือด้วย JavaScript และมันก็เป็นเช่นนั้นเพราะมันช่วยให้คุณโต้ตอบกับ CSS ได้โดยตรง

ในหลายกรณี คิวรี่สื่อนั้นเหนือกว่าเพราะมีเครื่องมือตรวจจับมือถือในตัว ตัวอย่างเช่น คุณสามารถโทรออกเพื่อตรวจสอบว่า “pointer:coarse” เป็นจริงหรือไม่

คำสั่งเฉพาะนี้จะตรวจสอบว่าตัวชี้ของอุปกรณ์นั้น ละเอียด หรือ หยาบ

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

อีกทางหนึ่ง อุปกรณ์อาจมีทั้งตัวชี้แบบละเอียดและแบบหยาบ สำหรับกรณีการใช้งานนี้ เราสามารถตรวจสอบว่าพอยน์เตอร์ ใด มีความหยาบหรือไม่

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

โปรดทราบว่าการดำเนินการนี้จะตรวจสอบความถูกต้องของข้อความค้นหาว่าจริงหรือเท็จเท่านั้น วิธีตรวจสอบอุปกรณ์เคลื่อนที่ที่ละเอียดยิ่งขึ้นคือการใช้คิวรีสื่อโดยตรง

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

แบบสอบถามนี้จะตรวจสอบความกว้างสูงสุดของอุปกรณ์โดยตรงและยืนยันว่าตรงกับเกณฑ์หรือไม่ อีกครั้ง การทำงานนี้ค่อนข้างมากในการทำให้อุปกรณ์ทั้งหมดถูกต้อง ด้วยเหตุนี้ จึงง่ายกว่าที่จะใช้ไลบรารีที่สร้างไว้ล่วงหน้าพร้อมอุปกรณ์ทุกประเภทที่กำหนดไว้แล้ว

มีประโยชน์ในบางบริบท

ในช่วงหลายปีที่ผ่านมามีคุณสมบัติ JavaScript มากมายสำหรับการตรวจจับประเภทอุปกรณ์ หลายคนเลิกใช้แล้ว แต่ส่วนอื่นๆ ส่วนใหญ่ได้รวมเข้ากับไลบรารี ซึ่งเป็นวิธีที่ดีที่สุดในการตรวจจับอุปกรณ์พกพาที่เหมาะสม

สุดท้ายแต่ไม่ท้ายสุด เฟรมเวิร์กที่ทันสมัยส่วนใหญ่ได้รวมการตรวจจับอุปกรณ์พกพาเป็นส่วนหนึ่งของเฟรมเวิร์กอยู่แล้ว เป็นเรื่องที่ควรค่าแก่การพิจารณาหากคุณไม่ต้องการทำทุกอย่างให้ถูกต้อง

ไลบรารี่สำหรับตรวจจับอุปกรณ์พกพา

สำหรับส่วนนี้ ฉันจะแสดงรายการไลบรารี JavaScript ยอดนิยมสำหรับการตรวจหาอุปกรณ์มือถือ ย้ำอีกครั้งว่าสิ่งเหล่านี้เป็นข้อมูลเฉพาะสำหรับ JavaScript อ้างถึงเอกสารสำหรับการใช้งานที่เหมาะสมในแอปของคุณ

UAArser.js

เท่าที่ห้องสมุดสมบูรณ์มี UAParser ดีที่สุดที่มีอยู่ ด้วยการดาวน์โหลดมากกว่า 10 ล้านครั้งต่อสัปดาห์บน npm เพียงอย่างเดียว UAParser เป็นโซลูชัน defacto สำหรับการตรวจจับอุปกรณ์มือถือ ตามชื่อของมัน – ไลบรารีทำงานโดยแยกวิเคราะห์สตริง User-Agent

อย่างไรก็ตาม สิ่งที่ทำให้เป็นที่นิยมมากคือคุณสามารถแยกวิเคราะห์รูปแบบต่างๆ ของอุปกรณ์ได้หลายร้อยแบบ และทั้งหมดนี้เป็นเอกสารที่ดีมาก คุณสามารถเปลี่ยนจากผู้จำหน่ายอุปกรณ์ที่ใช้งานได้จริงไปจนถึงรูปแบบการตรวจจับที่ซับซ้อนมากขึ้น เช่น สถาปัตยกรรม CPU

mobile-detect.js

นี่เป็นพอร์ตที่ค่อนข้างตรงไปตรงมาของไลบรารี Mobile Detect สำหรับ PHP ซึ่งมอบให้กับชุมชนโดย Heinrich Goebl ไลบรารีเองใช้ User-Agent สำหรับการตรวจจับ ดังที่เราได้กล่าวไว้ก่อนหน้านี้ ไม่ใช่ตัวเลือกที่ดีที่สุด

ถึงกระนั้นก็ควรจะทำงานได้ดีเมื่อพูดถึงเทมเพลต HTML หรือโครงการพอร์ตโฟลิโอ

isMobile

ในที่นี้ เรามาดูคุณสมบัติ User-Agent Navigator จาก Kai Mallea อีกครั้ง ในขณะที่ยังคงเป็นโซลูชันที่เรียบง่าย แต่ฉันชอบที่มือถือมีข้อกำหนดที่หลากหลาย ตัวอย่างเช่น คุณสามารถทดสอบ อุปกรณ์ เคลื่อนที่หรืออุปกรณ์เฉพาะ เช่น โทรศัพท์ หรือ แท็บเล็ต

react-device-detect

คุณเป็นนักพัฒนา React.js หรือไม่?

ห้องสมุดจาก Michael Laktionov นี้เหมาะสำหรับคุณ มันทำงานได้ตามที่คุณคาดหวัง – ขั้นแรกไลบรารีจะตรวจจับประเภทอุปกรณ์ จากนั้นแสดงมุมมองตามประเภทนั้น ทำงานได้อย่างไม่มีที่ติด้วยการรวมส่วนประกอบ และสามารถปรับแต่งเพิ่มเติมได้ผ่านการเรียก API

ข้อเท็จจริงที่น่าสนใจประการหนึ่งคือจำนวนตัวเลือกที่ห้องสมุดนี้รวมไว้ ครอบคลุมอุปกรณ์ต่างๆ เช่น สมาร์ททีวี อุปกรณ์สวมใส่ อุปกรณ์ iPhone ที่หลากหลาย และอื่นๆ อีกมากมาย สิ่งนี้ช่วยให้คุณมีตัวเลือกการออกแบบมากมายเมื่อสร้างแอพสำหรับอุปกรณ์เฉพาะ