태블릿에선 pc버전으로 보이게 할수 있을까요
본문
if( is_mobile() ) {
모바일내용
}
else {
pc내용
}
이런소스를 좀 많이 사용했더니
모바일이나 pc에선 별 문제가 없는데
태블릿에서 보면 틀이 많이 깨지네요..
태블릿으로 접속시 pc버전으로 보이게 하려면 어떻게 해야할까요..
답변 2
미디어쿼리를 써서 제어하는 방법이 가장 좋습니다.
/* ##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 }미디어쿼리를 이용하세요
예1 : 화면 사이즈에 따라 각각 보이기
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> @media (min-width: 1025px} {/* PC */ .pc_div {display:block} .tablets_div {display:none} .mo_div {display:none} } @media (min-width: 768px) and (max-width: 1024px) { /* 태블릿 */ .pc_div {display:none} .tablets_div {display:block} .mo_div {display:none} } @media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */ .pc_div {display:none} .tablets_div {display:block} .mo_div {display:none} } @media (max-width: 480px) { /* 모바일 */ .pc_div {display:none} .tablets_div {display:none} .mo_div {display:block} } </style> <div class="pc_div"> PC 화면 일때 <div> <div class="tablets_div"> 태블릿 화면 일때 <div> <div class="mo_div"> 모바일 화면 일때 <div> </body> </html>
예2: 하나의 코드에서 CSS로 조정하기
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> @media (min-width: 1025px} {/* PC */ .all_div {display:block; background:#fff000; padding:20px ; color:#000; font-size:20px; } } @media (min-width: 768px) and (max-width: 1024px) { /* 태블릿 */ .all_div {display:block; background:#fff000; padding:18px ; color:#ff0000; font-size:18px; } } @media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */ .all_div {display:block; background:#fff000; padding:16px ; color:#333; font-size:16px; } } @media (max-width: 480px) { /* 모바일 */ .all_div {display:block; background:#000; padding:14px ; color:#fff; font-size:14px; } } </style> <div class="all_div"> 공통 화면 <div> </body> </html>
답변을 작성하시기 전에 로그인 해주세요.
