if( is_mobile() ) {
모바일내용
}
else {
pc내용
}
이런소스를 좀 많이 사용했더니
모바일이나 pc에선 별 문제가 없는데
태블릿에서 보면 틀이 많이 깨지네요..
태블릿으로 접속시 pc버전으로 보이게 하려면 어떻게 해야할까요..
|
답변 2개
채택된 답변
+20 포인트
DSLOVE
2020-04-28 (화) 20:38:05
미디어쿼리를 써서 제어하는 방법이 가장 좋습니다.
별지기천사
2020-04-28 (화) 21:46:18
Copy
/*
##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 : 화면 사이즈에 따라 각각 보이기
Copy
<!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로 조정하기
Copy
<!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>답변을 작성하려면 로그인이 필요합니다.