반응형 (2) 썸네일형 리스트형 반응형 웹 디바이스 구분하기 반응형 사이트의 경우 사이트 경로가 동일하여 디바이스에 따른 구분을 하기 힘든데요. 스크린의 크기를 지정하여 구현하는 방법도 가능하지만 코드를 통해 간단히 구현하는 방법을 안내해 드리겠습니다. 구현하기 사용할 코드는 아래와 같은데요. /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 화면에 따라 코드를 테스트 해 보면 아래처럼 디바이스에 따라 다른 값이 반환되는 것을 확인 가능합니다. 따라서 반환되는 값을 조건으로 지정하여 코드를 구현하면 됩니다! HTML 삽입 미리보기할 수 없는 소스 Viewport 뷰포트는 화면의 크기를 말합니다. 과거에는 컴퓨터가 웹사이트에 접근하기 위한 거의 유일한 수단이었기 때문에 뷰포트도 컴퓨터 화면에 최적화되었습니다. 문제는 상대적으로 큰 크기의 컴퓨터 화면에 최적화된 뷰포트는 작은 화면에서 표시되는 콘텐츠와 비율이 맞지 않아 미적기능이 저하되었습니다. 문제는 지정된 뷰포트의 크기보다 기기 화면이 작을 때 발생하는데요. 아래처럼 뷰포트의 크기가 기기 크기보다 클 때 콘텐츠가 화면에 다 표시되지 않습니다. 뷰포트의 설정된 크기보다 기기의 크기가 큰 경우는 무리 없이 화면에 표시됩니다. 디바이스의 종류와 관계없이 뷰포트의 비율을 조정하기 위해 아래와 같이 메타태그를 추가되었고 현재 널리 사용되고 있습니다. 뷰포트 메타태그는 아래와 같은 속성을 가집니다. 1. width 보기처.. 이전 1 다음
