PC, 모바일에서 다른 이미지 출력하는 스크립트

"PC, 모바일에서 다른 이미지 출력하는 스크립트"

 

웹사이트를 개발하다 보면 PC와 모바일에서 각각 다른 이미지를 출력해야 하는 경우가 있습니다.

예를 들어, PC에서는 상세한 이미지를, 모바일에서는 간략한 이미지를 출력하고 싶을 때가 있습니다.

 

PC, 모바일에서 다른 이미지 출력하는 스크립트

 

이러한 경우, 다음과 같은 방법으로 스크립트를 작성하여 PC와 모바일에서 다른 이미지를 출력할 수 있습니다.

 

페이지 폭을 인식하여 이미지를 출력하기

<script>
// PC에서 접속했을 때
if (window.innerWidth > 768) {
  // PC용 이미지를 출력합니다.
  document.querySelector(".pc-image").src = "pc-image.png";
} else {
  // 모바일용 이미지를 출력합니다.
  document.querySelector(".mobile-image").src = "mobile-image.png";
}
</script>

위의 스크립트는 window.innerWidth 속성을 사용하여 현재 페이지의 너비를 확인합니다.

페이지 너비가 768픽셀보다 크면 PC에서 접속한 것으로 간주하여 .pc-image 클래스를 가진 이미지를 출력합니다.

너비가 768픽셀보다 작으면 모바일에서 접속한 것으로 간주하여 .mobile-image 클래스를 가진 이미지를 출력합니다.

 

반응형 웹페이지를 만들 경우에 유용하게 사용할 수 있는 스크립트입니다.

 

 

"PC, 모바일에서 다른 이미지 출력하는 스크립트"

 

반응형

 

 

사용하는 브라우저를 인식하여 이미지를 출력하기

<script>
// PC에서 접속했을 때
if (navigator.userAgent.match(/(MSIE|Edge|Chrome|Safari|Firefox)/i)) {
  // PC용 이미지를 출력합니다.
  document.querySelector(".pc-image").src = "pc-image.png";
} else {
  // 모바일용 이미지를 출력합니다.
  document.querySelector(".mobile-image").src = "mobile-image.png";
}
</script>

위의 스크립트는 인터넷 익스플로러(MSIE), 엣지 브라우저(Edge), 크롬(Chrome), 사파리(Safari), 파이어 폭스(Firefox)와 같은 브라우저의 종류를 확인합니다.

해당 브라우저 중 하나를 사용하는 경우 PC에서 접속한 것으로 간주하여 .pc-image 클래스를 가진 이미지를 출력합니다. 그렇지 않으면 모바일에서 접속한 것으로 간주하여 .mobile-image 클래스를 가진 이미지를 출력합니다.

 

요즘은 온라인 환경이 빠른 속도로 모바일의 점유율이 늘어나고 있는 실정입니다.

사용자들에게 보다 효과적인 이미지를 보여주어 사용자경험(UX)을 증가시키는데 이러한 스크립트는 도움이 될 것입니다.

 

각각

pc-image.png 는 PC에서 보여질 이미지의 경로를

mobile-image.png 는 모바일에서 보여질 이미지의 경로로 바꾸면 됩니다.

 

 

[관련 글]

구글 크롬 pc버전 무료 다운로드 - 2023년 최신

구글 크롬 pc버전 무료 다운로드 - 2023년 최신

랜덤 이미지 출력하기 Javascript 소스

랜덤 이미지 출력하기 Javascript 소스

CropMarks 스크립트를 보완한 인디자인(InDesign) 투터치 재단선 그리기 CropMarks-II

CropMarks 스크립트를 보완한 인디자인(InDesign) 투터치 재단선 그리기 CropMarks-II