PHP 환경에서 자바스크립트를 이용한 브라우저 창 크기 감지 및 활용 방법

• 목록
• 스크랩

PHP 환경에서 자바스크립트를 이용한 브라우저 창 크기 감지 및 활용 방법

PHP 서버 사이드 환경에서 자바스크립트를 활용해 클라이언트 브라우저의 창 크기를 감지하고 표현하는 방법과 실시간 연동 시 고려해야 할 사항을 알아봅니다.

PHP 환경에서 자바스크립트로 브라우저 창 크기 감지 및 표현하기

PHP는 서버 사이드 언어이므로 클라이언트 브라우저의 크기를 직접 알 수 없습니다. 따라서 자바스크립트의 window.innerWidth 값을 이용해 브라우저 창 크기를 가져온 뒤 PHP 변수에 담아 출력하는 방식을 사용할 수 있습니다.

기본 코드 예시

PHP 코드 내에 자바스크립트를 작성하여 현재 브라우저의 가로 크기를 표현하는 스니펫은 다음과 같습니다.

<?php 
$myWidth = '<script>document.write(window.innerWidth);</script>'; 
echo $myWidth; 
?>

주의사항 및 다음 행동

• 위 방식은 페이지가 로드되는 시점의 브라우저 크기를 출력합니다.
• 마우스로 브라우저 창 크기를 실시간으로 변경하는 값까지 PHP 서버 단에 반영하려면 추가적인 AJAX 연동이 필요합니다.

브라우저 크기 변경 시 서버 단(PHP) 실시간 반영 방식

PHP는 서버 사이드 언어이므로 이미 웹브라우저에 뿌려진 내용을 곧바로 PHP 변수로 직접 집어넣을 수는 없습니다. 한 번 렌더링된 PHP 변수는 서버에서 처리가 끝난 상태이므로, 마우스로 창 크기를 실시간으로 늘리거나 줄일 때 발생하는 크기 변화를 PHP 조건문 안에 즉시 반영하려면 자바스크립트와 비동기 통신(AJAX)을 연동하는 방식을 사용해야 합니다.

주요 연동 구조

• 정보 감지 및 전송: 웹브라우저의 정보를 자바스크립트로 알아낸 뒤, 창 크기 변경에 따른 이벤트를 감지하여 비동기 요청(AJAX)으로 서버(PHP)에 전달합니다.
• 서버 처리: 서버로 전달된 크기 데이터를 세션으로 만들거나 데이터로 저장하여 이후 페이지 로직이나 조건문에 참조하는 방식을 활용할 수 있습니다.

CSS 미디어쿼리를 활용한 화면 크기별 영역 제어

화면 해상도나 브라우저 크기에 따라 특정 HTML 영역을 숨기거나 보여주고 싶을 때는 서버사이드 언어인 PHP 조건문 대신 CSS 미디어쿼리를 사용하는 것이 효율적인 대안입니다.

적용 방법

특정 해상도 미만일 때 특정 div 영역을 숨기고자 할 경우, CSS 파일이나 <style> 태그 내에 미디어쿼리를 작성합니다.

/* 예: 해상도 1040px 미만일 때.aaa 영역 숨기기 */
@media (max-width: 1039px) {
.aaa {
 display: none;
 }
}

활용 시 장점

• 페이지를 새로고침하거나 AJAX를 통해 클라이언트의 해상도 정보를 서버(PHP)로 전송하는 복잡한 과정 없이, 브라우저 창 크기에 따라 실시간으로 레이아웃을 제어할 수 있습니다.

브라우저 창 크기 감지 및 표현 가이드

• 상황: PHP 환경에서 접속자의 브라우저 창 크기를 확인하거나 이를 기반으로 화면을 제어하고자 함.
• 선택 기준:
  1. 단순 출력: 페이지 로드 시점의 크기만 화면에 표시하면 되는 경우 (Q1 참조).
  2. 레이아웃 제어: 특정 해상도에 따라 영역을 숨기거나 보여주는 것이 목적이라면 CSS 미디어쿼리 사용 (Q3 참조).
  3. 실시간 서버 반영: 창 크기 변화를 PHP 서버 로직에 즉시 반영해야 한다면 AJAX 비동기 통신 구현 (Q2 참조).
• 다음 행동: 단순 출력은 Q1의 스니펫을 적용하고, 레이아웃 제어가 목적이라면 CSS 미디어쿼리를 우선 검토하십시오.

실전 FAQ

Q. 브라우저 크기를 변경해도 PHP 변수 값이 실시간으로 바뀌지 않습니다.

• 원인: PHP는 서버에서 실행되어 결과물만 브라우저로 전달하므로, 이미 렌더링된 화면의 크기 변화를 서버가 직접 감지할 수 없습니다.
• 대안: 자바스크립트의 resize 이벤트를 감지하여 AJAX로 서버에 데이터를 전송하고, 서버 측에서 세션이나 DB에 저장하여 참조하는 방식을 사용해야 합니다.

Q. 특정 해상도에서만 특정 영역을 숨기고 싶습니다.

• 대안: PHP 조건문 대신 CSS 미디어쿼리를 사용하면 페이지 새로고침 없이 브라우저 크기에 따라 즉각적인 레이아웃 제어가 가능합니다. (예: @media (max-width: 1039px) {.aaa { display: none; } })

함께 보면 좋은 글

• 그누보드4 게시판 내용보기 브라우저 타이틀에 카테고리명 포함시키기
• PHP 브라우저 언어 설정 기반 페이지 자동 포워딩 구현 방법
• 그누보드 IE 브라우저 접속 시 안내 페이지 리다이렉트 구현 방법

참고자료

기타 참고자료

• dev-chim.tistory.com — Javascript 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자
• sir.kr — 화면 크기 정보를 php 로 넘기기 - SIR - 개발자 커뮤니티
• sir.kr — 브라우저 창크기에 반응해서 php로 값을 표현하는 것이 필요합니다. - SIR - 개발자 커뮤니티