테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

태블릿에선 pc버전으로 보이게 할수 있을까요 채택완료

에헤라디야 5년 전 조회 6,774
답변 2
목록

if( is_mobile() ) {

    모바일내용

}

else {

  pc내용

}

 

이런소스를 좀 많이 사용했더니

모바일이나 pc에선 별 문제가 없는데

태블릿에서 보면 틀이 많이 깨지네요..

태블릿으로 접속시 pc버전으로 보이게 하려면 어떻게 해야할까요..

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
D
DSLOVE
5년 전

미디어쿼리를 써서 제어하는 방법이 가장 좋습니다.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

별 

                
                
</strong> 
/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) {

//CSS

}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

//CSS

}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (min-width: 481px) and (max-width: 767px) {

//CSS

}</pre>

<p><strong>

            
 



 



미디어쿼리를 이용하세요



예1 : 화면 사이즈에 따라 각각 보이기 



                
                
</strong> </p>

<p> </p>

<p><!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  </p>

<p>

<style type="text/css">

    </p>

<p>@media (min-width: 1025px} {/* PC */

.pc_div {display:block}

.tablets_div {display:none}

.mo_div {display:none}

}</p>

<p>@media (min-width: 768px) and (max-width: 1024px)  { /* 태블릿 */

.pc_div {display:none}

.tablets_div {display:block}

.mo_div {display:none}

}</p>

<p>

@media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */

.pc_div {display:none}

.tablets_div {display:block}

.mo_div {display:none}

}</p>

<p>

@media (max-width: 480px)  { /* 모바일 */

.pc_div {display:none}

.tablets_div {display:none}

.mo_div {display:block}

}</p>

<p></style></p>

<p><div class="pc_div"> PC 화면 일때 <div></p>

<p><div class="tablets_div"> 태블릿 화면 일때 <div></p>

<p><div class="mo_div"> 모바일 화면 일때 <div></p>

<p> </body>

</html>

<strong>

            
 



 



예2: 하나의 코드에서  CSS로 조정하기



                
                
</strong> </p>

<p><!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

 <body>

  </p>

<p><style type="text/css">

    

@media (min-width: 1025px} {/* PC */

.all_div {display:block; background:#fff000; padding:20px ; color:#000; font-size:20px; }

}</p>

<p>@media (min-width: 768px) and (max-width: 1024px)  { /* 태블릿 */

.all_div {display:block; background:#fff000; padding:18px ; color:#ff0000; font-size:18px; }

}</p>

<p>@media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */

.all_div {display:block; background:#fff000; padding:16px ; color:#333; font-size:16px; }

}</p>

<p>@media (max-width: 480px)  { /* 모바일 */

.all_div {display:block; background:#000; padding:14px ; color:#fff; font-size:14px; }

}</p>

<p></style></p>

<p><div class="all_div"> 공통 화면  <div></p>

<p> </body>

</html></p>

<p><strong>

            
 
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인