서브페이지 상단 이미지를 pc용과 mo용으로 따로 설정하고 싶습니다.
본문
안녕하세요.
반응형 웹사이트인데
서브 페이지마다 이미지는 따로 설정이 가능한데
이걸 PC용과 MO용으로 구분해서 이미지를 올리고 싶습니다.
현재 코딩 소스
$SUB_BACKGROUND = array(
"인사말" => G5_THEME_URL."/html/image/sub_visual01.jpg",
"오시는길" => G5_THEME_URL."/html/image/sub_visual02.jpg",
"고객센터" => G5_THEME_URL."/html/image/sub_visual03.jpg",
"맴버쉽" => G5_THEME_URL."/html/image/sub_visual04.jpg",
);
위의 소스에서 어떻게 수정해야 mobile에서 다른 이미지를 보여줄 수 있을까요?..
PC용
MO용
요런식으로요...
아시는 분 답변 부탁드립니다!
답변 3
if (G5_IS_MOBILE) {
$SUB_BACKGROUND = array(
"인사말" => G5_THEME_URL."/html/image/sub_visual01_m.jpg",
"오시는길" => G5_THEME_URL."/html/image/sub_visual02_m.jpg",
"고객센터" => G5_THEME_URL."/html/image/sub_visual03_m.jpg",
"맴버쉽" => G5_THEME_URL."/html/image/sub_visual04_m.jpg",
);
} else {
$SUB_BACKGROUND = array(
"인사말" => G5_THEME_URL."/html/image/sub_visual01.jpg",
"오시는길" => G5_THEME_URL."/html/image/sub_visual02.jpg",
"고객센터" => G5_THEME_URL."/html/image/sub_visual03.jpg",
"맴버쉽" => G5_THEME_URL."/html/image/sub_visual04.jpg",
);
}
감사합니다~
여러 가지 방법이 존재 합니다.
그중 하나를 설명 드리면 css 자체를 pc, mobile 일때 돌리는 css를 다르게 운영하는 방법이 있을수 있습니다.
아니면 1개의 css라면 미디어쿼리를 사용했을거구요...
보통 위 답변대로 사용할 경우
<div id="pc"></div>
<div id="mobile"></div>
를 모두 해 놓구 css가 인식이 되는...즉
PC 용 css 에는 #pc {display:block;} 이고 #mobile{display:none;} 이라면
Mobile 용 css 에는 #pc {display:none;} 이고 #mobile{display:block;} 라고 처리가 되겠죠??
감사합니다!
https://github.com/serbanghita/Mobile-Detect 에 모바일 체크하는 샘플이 있습니다.
$d = new MobileDetect();
$device = $d->isMobile();
if($device) {
// 모바일용 이미지 배열 정의
} {
// PC용 이미지 배열 정의
}
감사합니다!
