모바일과 pc에서 다르게 보여주고 싶습니다.
본문
수고하십니다.
아래 코드를 모바일과 pc에서 위치와 크기를 다르게 하고 싶은데
아래와 같이 코드를 써서 보여주려해도
소스가 먹히지가 않네요.
pc에서는 보이고 모바일에서는 안보이게
<?php if(!G5_IS_MOBILE) { ?>
내용
<?php } ?>
모바일에서는 보이고 pc에서는 안보이게
<?php if(G5_IS_MOBILE) { ?>
내용
<?php } ?>
이 코드 말고 스타일이나 이미지에서
위치와 크기를 조절 해 줄 수 있을까요?
<style>
body {background-color: #fff; margin:0; padding: 0;}
ul {margin: 0;}
.fixed_quick {
position: fixed;
z-index: 99999;
bottom: 130px; /* 위치 */
right: 35px; /* 위치 */
}
.quick {
border-radius: 40%;
text-align: center;
height: 50px; /* 크기 */
width: 50px; /* 크기 */
box-sizing: border-box;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); /* 그림자 */
cursor: pointer;
transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);
border:0.0px solid rgba(0,0,0,0.1); /* 테두리라인 */
}
.quick svg {transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);}
.quick:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.01); border:0.0px solid rgba(0,0,0,0.5);}
.quick:hover svg {fill: #000;} /* 마우스오버시 svg 아이콘의 fill 변경 */
/* 퀵메뉴 개별 스타일 */
.quick3 {background-color: #; margin-top: 38px;}
.quick3 svg {margin-top: 13px;}
.quick4 {background-color: #; margin-top: 8px;}
.quick4 svg {margin-top: 13px;}
</style>
<!-- } -->
<!-- 퀵메뉴 시작 { -->
<div class="fixed_quick">
<ul>
<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick4" onclick="location.href='tel:000-0000';">
<img src="<?php echo G5_THEME_URL;?>/html/image/t_bg02.png" width="70" height="auto" alt="전화상담" title="전화상담">
</div>
<!-- } -->
<div class="quick quick3" onclick="location.href='#';id='MOVE_TOP_BTN'">
<img src="<?php echo G5_THEME_URL;?>/html/image/t_bg04.png" width="70" height="auto" alt="Top" title="Top">
</div>
<script>
//TOP 버튼
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});
$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
</ul>
</div>
<script>
//클릭액션 quick4 를 클릭하는 경우 나머지 보이기&감추기
$(document).ready(function() {
$('.quick4').click(function() {
$('.quick3').fadeToggle(300);
});
});
</script>
<!-- } 퀵메뉴 끝 -->
답변 2
<style>
.my-class { padding : <?php echo $is_moble ? "5px" : "10px"; ?>; }
</style>
어대충 이런 식으로요 만일 달라야할 css 가 많다면...
<?php if ($is_mobile) { ?>
<style>
모바일 css
</style>
<?php } else { ?>
<style>
pc css
</style>
<?php } ?>
common.php 가 인클루드 되어 있나요?
스타일도 저렇게 감싸면 pc일때 적용되고 mobile 에서 적용됩니다
답변을 작성하시기 전에 로그인 해주세요.