화면의 크기, CSS, Javascript 그리고 php

웹작업을 하다 보면 가끔 사용자의 화면 크기를 알고 싶을 때가 있다. 디자인적인 측면에서 해상도에 따라서 다른 크기나 내용을 보여 줄 수 있는데 요즘은 CSS를 사용하여 브라우저의 크기에 따라서 다른 디자인을 보여 주곤한다. 보통 코드는 아래와 같다.

<style>
 @media (min-width:20rem){
 /*
 화면의 크기가 20rem보다 작을 때 보여지는 CSS코드
 */
 }
 @media (min-width:50rem){
 /*
 화면의 크기가 50rem보다 작을 때 보여지는 CSS코드
 */
 }
</style>

위와 같은 코드를 이용하면 사용자의 화면 크기에 따라서 다른 디자인 적용이 가능하다. 널리 알려져 있는 코드이다.
서버쪽 php에서는 사용자의 화면 크기를 알 수 있는 방법이 없기 때문에 약간의 꼼수를 사용하여 php에게 사용자 화면 크기를 알려 줄 수 있다.

바로 아작스(Ajax)를 이용하면 된다.
우선 사용자 페이지와 ajax로 소통할 수 있는 페이지를 만든다. 여기선 05.php와 util.php를 사용한다.

시작하기 전에 사용자 화면을 구하는 방법은 아래와 같다.

<script>
/* 자바스크립트를 이용한 가로 세로 */
var wid = innerWidth;
var hei = innerHeight;

/* 아래는 jQuery를 히용한 가로 세로 */
var jWid = $(window).width();
var jHei = $(window).height();
</script>

위의 두 가지는 다른 코드이지만 결과는 사용자의 가로 세로 길이를 픽셀로 저장하는 방법으로 모두 같은 결과를 만든다.

그럼 ajax를 이용해서 저 값을 util.php에 전달하면 php로 값을 넘길 수 있다. 여기서는 ajax는 jQuery를 사용하기 때문에 위의 변수도 jQuery걊을 사용한다. 또한 브라우저의 창 크기가 변경 될 때 $(window).resize() 를 사용하면 실시간으로 변경되는 크기를 구할 수 있다.

아래와 같은 코드를 이용하면 된다.

<script>
$(window).resize(function(){
var jWid = $(window).width();
var jHei = $(window).height();
});
</script>

위의 코드는 가로와 세로가 변하면 실시간으로 변경된 길이를 해당 변수에 담게된다.
이제 아작스(ajax)를 사용하여 php에 해당 변수에 저장되어 있는 수치를 전달할 차례이다.
처음 페이지가 로딩 될때, 그리고 창크기를 조절하는 리사이즈 이벤트가 일어날 때 이렇게 두 번 ajax를 넣고 서버 쪽 util.php에서는 받은 값만 echo 해 주면 된다.

사용자 페이지의 전체 코드는 아래와 같다.

<script>
$(document).ready(function(){
 var jWid = $(window).width();
 var jHei = $(window).height();
 
 $("#jView").text(jWid + " * " + jHei);
 $.ajax({
 url:"util.php?width=" + jWid + "&height=" + jHei,
 type: "get",
 success:function(data){
 /* 이 곳에 필요한 작업을 하자 */
 $("#phpView").text(data);
 }
 });
});
$(window).resize(function(){
 var jWid = $(window).width();
 var jHei = $(window).height();
 $("#jView").text(jWid + " * " + jHei);
 $.ajax({
 url:"util.php?width=" + jWid + "&height=" + jHei,
 type: "get",
 success:function(data){
 /* 이 곳에 필요한 작업을 하자 */
 $("#phpView").text(data);
 }
 });
});
</script>

마지막으로 서버 쪽 util.php 파일이다.

<?php
echo $_GET['width'] . ' * ' . $_GET['height'];

이렇게 해서 사용자 브라우저 창 크기를 php에 전달할 수 있는 방법이 생겼다. 그런데 문제가 있다. 어떤 악의적인 사용자가 브라우저 창크기를 계속 리사이징하고 있다면 ajax 때문에 서버에 무리가 생길 수 있다. 사이즈가 바뀌면서 서버와 계속 통신을 하기 때문이다.

어떤 방법이 있을까? 가장 간단하게 생각해 볼 수 있는 것은 리사이즈가 끝나고 마우스 조작이 멈췄을 때 한 번만 ajax를 실행하는 것이다. 서버에 부담을 매우 많이 줄일 수 있을 것이다. 이럴 때 사용할 수 있는 jQuery 함수 중에서 on() 이 있다. 아래의 코드를 보자. on() 함수를 이용하여 이벤트를 붙였다. 이제 서버의 부담이 많이 줄었다. 더 좋은 방법이 있겠지만 이 정도에서 마무리 하자.

<script>
var tempTime = 300;
var timer = null;
        
$( window ).on( "resize", function( ) {
    clearTimeout( timer );
    timer = setTimeout( resizeDone, tempTime );
} );
        
function resizeDone( ) {
    var jWid = $(window).width();
    var jHei = $(window).height();
    $("#jView").text(jWid + " * " + jHei);
    $.ajax({
        url:"util.php?width=" + jWid + "&height=" + jHei,
        type: "get",
        success:function(data){
            $("#phpView").text(data);
        }
    });
}
</script>

 

 

이에 대한 예제 페이지가 http://exam.inmu.net/1701/005.php 에 있다 관심이 있다면 링크를 클릭해보자.