JavaScript でのモバイル開発とレスポンシブ デザインをマスターする

function isMobile() {
  const regex = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/
  return regex.test(navigator.userAgent)
}

let startX, startY

function handleTouchStart(event) {
  const touch = event.changedTouches[0]
  startX = touch.pageX
  startY = touch.pageY
}

function handleTouchEnd(event) {
  const touch = event.changedTouches[0]
  const endX = touch.pageX
  const endY = touch.pageY
  const deltaX = endX - startX
  const deltaY = endY - startY
  
  if (deltaX > 50) {
    // swipe right
  } else if (deltaX < -50) {
    // swipe left
  }
  
  if (deltaY > 50) {
    // swipe down
  } else if (deltaY < -50) {
    // swipe up
  }
}

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(event) {
    const alpha = event.alpha
    const beta = event.beta
    const gamma = event.gamma

    // do something with alpha, beta, and gamma
  })
}

const screenWidth = window.innerWidth

if (screenWidth < 768) {
  // apply styles for mobile devices
} else if (screenWidth < 1024) {
  // apply styles for tablet devices
} else {
  // apply styles for desktop devices
}