화면 크기 정보를 php 로 넘기기

화면 크기 정보를 php 로 넘기기

QA

화면 크기 정보를 php 로 넘기기

본문

해상도 1040px 이상일때

<div class="aaa">

   <div class="ccc">123</div>

</div>

<div class="bbb">777</div>

 

해상도 1040px 미만일때는 아래와 같이 <div class="aaa">와 </div> 를 숨기려고 합니다.

<div class="ccc">123</div>

<div class="bbb">777</div>

 

php 코드로는 화면 해상도 구현이 안된다고 하더군요

구글링을 해보면  jQuery 또는 javascript를 이용해서 화면크기를 받은후 그것을 php 변수로 넘겨야 할텐데...

어떤 문서를 보니 ajax 와 json 을 이용해서 post 로 넘기고 그것을 다시 받아와서 넣으라고도 하네요

 

해결에 큰도움을 주시는 분께 커피쿠폰을 넉넉하게 보내드리겠습니다.

여러분 도와주세요 ㅠㅠ

이 질문에 댓글 쓰기 :

답변 5

<script >

 function callwin(){

     var w = $(window).width();

     var h = $(window).height();

     var url= "aa.php?w="+w+"&h="+h;

     //그외 파라메터도 이곳에 

     var win= window.open(url,"pop","widht=600,height=800");

 

}

</script>

이미 창이떠있다면 이렇게 하면됩니다. 만약 창크기변경에 따라 연동시킨다면 ajax 가 낫겠지만..... 

그런데 쓰신 내용봐선 그냥 미디어쿼리 css 사용하심이.... 

<div class="tt">

    <div class="aaa">

         <div class="ccc">123</div>

    </div>

    <div class="bbb">777</div>

 </div>

<div class="tt2">

        <div class="ccc">123</div>

        <div class="bbb">777</div>

</div>

<style>

@media screen and (min-width: 1040px) {
   .tt{display:block}
   .tt2{display:none}
}

@media screen and (max-width: 1039px) {

    .tt{display:none}

    .tt2{display:block}

}

</style>

이런식이면 페이지 리플래쉬없이 해상도에 따라 동작합니다 

미디어쿼리를 이용하면 간단합니다만
미디어쿼리를 활용하기 어려우면 아래와 같은 방법으로 하시면됩니다

<script>
$.ajax({
    type: "post",
    url: "window.php",
    data: {
        "width" : window.innerWidth,
    },
    dataType: "json",
    success: function (d) {
        if(d.width>=1040){
            //이상일때
        }else{
            //이하일때
        }
    }
});
</script>

<?php 
$width = $_POST['width'];
echo '{"width" : "'.$width.'"}';
?>

한번 웹브라우저에 뿌린 내용을 ajax로 받아 php변수로 넣을 수는 없습니다.

물론 웹브라우저의 정보를 javascript로 알아 내서 ajax로 php로 보내 저장하거나 세션으로

만들어 참조할 수는 있겠죠.

 

이런 경우에는 그냥 아래 처럼 처리하시는 것이 좋을 듯 싶네요.

 

<!--테스트 CSS-->
<style>
.aaa { font-weight:bold;font-size:2em; }
.ccc { color:red; }
</style>

<div class="bbb">777</div>

<script>
$(function() {
    alert("넓이: "+$(window).width());
    if($(window).width() > 1040) {
        $( '<div class="aaa"><div class="ccc">123</div></div>' ).insertBefore( ".bbb" );
    } else {
        $( '<div class="ccc">123</div>' ).insertBefore( ".bbb" );
    }
});
</script>

참고해볼 수 있는 글일것 같습니다. - https://stackoverflow.com/a/1504526

결과적으로 달성하고자 하는 목적이,
특정 해상도 이상과 미만일 때,
특정 div 영역을 화면 상에 보여주지 않고자 하는 것으로 보입니다.

간단하게 미디어쿼리 사용하시면 해결될 것 같습니다.

님께서 작성하여 주신 소스 참조하시면 될 것 같습니다.

결론적으로는 맞는 것인데,  유사한 코드가 반복적으로 사용하지 않고 php 조건으로 보이지 않게 하고픈 마음에 방법을 찾고 있습니다.
미디어쿼리로 일단 조치하고 방법을 더 찾아봐야겠습니다.
조언 감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 124
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT