PC 접속하면 모바일 css가 적용되는 현상
본문
PC로 접속을 하면 특정 부분에 대해서만(main.10.skin.php) 모바일 css가 적용되는 현상이 생겼습니다.
모바일로 접속하면 모바일 css로 나옵니다.ㅠㅠ
theme/strawberry/head.sub.php
<?php
$shop_css = '';
if (defined('_SHOP_')) $shop_css = '_shop';
echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').$shop_css.'.css?ver='.G5_CSS_VER.'">'.PHP_EOL;
?>
shop.head.php
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
if(G5_IS_MOBILE) {
include_once(G5_THEME_MSHOP_PATH.'/shop.head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
set_cart_id(0);
$tmp_cart_id = get_session('ss_cart_id');
add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider.js"></script>', 0);
$q = isset($_GET['q']) ? clean_xss_tags($_GET['q'], 1, 1) : '';
?>
main.10.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery.shop.list.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/swiper/swiper.min.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/swiper/swiper.min.js"></script>', 10);
?>
<div class="swiper-container sw1 sct_10"> <!-- sct_10 클래스 추가 -->
<div class="swiper-wrapper">
<!-- 상품진열 10 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {
if ($this->list_mod >= 2) {
if ($i % $this->list_mod == 0) $sct_last = 'sct_last';
else if ($i % $this->list_mod == 1) $sct_last = 'sct_clear';
else $sct_last = '';
} else {
$sct_last = 'sct_clear';
}
echo "<div class=\"swiper-slide sct_li {$sct_last}\" >\n";
echo "<div class=\"sct_img\">\n";
if ($this->href) {
echo "<a href=\"{$this->href}{$row['it_id']}\" title=\"".htmlspecialchars(stripslashes($row['it_name']))."\">\n";
}
if ($this->view_it_img) {
echo "<img src=\"". get_it_imageurl($row['it_id']) ."\" width=\"". $this->img_width ."\" height=\"". $this->img_height ."\" alt=\"". htmlspecialchars(stripslashes($row['it_name'])) ."\">";
}
if ($this->href) {
echo "</a>\n";
}
if ($this->view_it_icon) {
echo item_icon2($row);
}
// 버튼 및 SNS 공유 관련 코드 유지
echo "<div class=\"sct_btn\"><div class=\"sct_btn_wr\"><button type=\"button\" class=\"btn_cart\" data-it_id=\"{$row['it_id']}\"><span class=\"sound_only\">장바구니</span><i class=\"fa fa-shopping-cart\"></i></button><button type=\"button\" class=\"btn_wish\" data-it_id=\"{$row['it_id']}\"><span class=\"sound_only\">위시리스트</span><i class=\"fa fa-heart-o\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"btn_share\"><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i><span class=\"sound_only\">sns공유</span></button>\n";
echo "</div>\n";
if ($this->view_sns) {
$sns_top = $this->img_height + 10;
$sns_url = G5_SHOP_URL.'/item.php?it_id='.$row['it_id'];
$sns_title = get_text($row['it_name']).' | '.get_text($config['cf_title']);
echo "<div class=\"sct_sns\"><div class=\"sct_sns_wr\"><h3>SNS 공유</h3><div>";
echo get_sns_share_link('facebook', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/facebook.png');
echo get_sns_share_link('twitter', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/twitter.png');
echo get_sns_share_link('googleplus', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/gplus.png');
echo get_sns_share_link('kakaotalk', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/sns_kakao.png');
echo "</div><button type=\"button\" class=\"btn_close\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></button></div><div class=\"bg\"></div></div>\n";
}
echo "</div>\n"; // .sct_img 끝
// 기타 정보 출력
echo "<div class=\"sct_cartop\"></div>\n";
if ($this->view_it_id) {
echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";
}
echo "</div>\n"; // .sct_li 끝
if ($this->href) {
echo "<div class=\"sct_txt\"><h2>\n";
}
if ($this->href) {
echo "<a href=\"{$this->href}{$row['it_id']}\" class=\"sct_tit\" title=\"".htmlspecialchars(stripslashes($row['it_name']))."\">\n";
}
if ($this->view_it_name) {
echo stripslashes($row['it_name'])."\n";
}
if ($this->href) {
echo "</a></h2>\n";
}
echo "</div>\n";
if ($this->view_it_basic) {
echo "<div class=\"sct_basic\"><h3>".stripslashes($row['it_basic'])."</div></h3>\n";
}
if ($this->view_it_cust_price || $this->view_it_price) {
echo "<div class=\"sct_cost\"><h3>\n";
if ($this->view_it_price) {
echo display_price(get_price($row), $row['it_tel_inq'])."\n";
}
if ($this->view_it_cust_price && $row['it_cust_price']) {
echo "<span class=\"sct_discount\">".display_price($row['it_cust_price'])."</span>\n";
}
echo "</div></h3>\n";
}
if ($this->view_it_icon) {
echo item_icon3($row);
}
$s_core = (int)$row['it_use_avg'];
if ($s_core > 0 ) {
echo "<span class=\"sct_star\"><img src=".G5_SHOP_URL."/img/s_star".$s_core.".png></span>";
}
echo "</div>\n"; // .sct_li 끝
}
if ($i > 1) echo "</div>\n"; // swiper-wrapper 닫기
if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
<br>
<div class="swiper-pagination"></div>
<br>
</div> <!-- swiper-wrapper 끝 -->
</div> <!-- swiper-container 끝 -->
<script>
$('.btn_share').click(function(){
$(this).parent().next('.sct_sns').show();
});
$('.sct_sns_wr .btn_close').click(function(){
$('.sct_sns').hide();
});
$('.sct_sns .bg').click(function(){
$('.sct_sns').hide();
});
document.addEventListener('DOMContentLoaded', function () {
var swiper = new Swiper('.sw1', {
slidesPerView: 4,
spaceBetween: 10,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 10000, // 10초 (10000ms) 간격
disableOnInteraction: false, // 사용자 인터랙션 후에도 autoplay가 계속 진행되도록 설정
},
});
});
</script>
<!-- } 상품진열 10 끝 -->
입니다. 어떤 부분이 문제일까요?
답변 3
부분 css 에서 겹치는 현상 있는지 체크해보세요
예를들어서
main.10.skin.php 내에 겹치는게 있을수도있어요
주소창에 ?device=pc로 해보시겠어요 ? pc로 들어갔지만 디바이스를 모바일로 인식하는경우도 있습니다.
해결했습니다.
<div class="container">
<!-- 카드 슬라이더 시작 -->
<?php include_once(G5_SHOP_SKIN_PATH.'/card_slider.skin.php'); ?>
<!-- 카드 슬라이더 끝 -->
</div>
<script>
$("#container").removeClass("container").addClass("idx-container");
</script>
index.php에 이런 코드가 있었는데 상품 시작 부분에도 <div class="container">
라고 적용해서 모바일로 보여지는 현상이였습니다.
답변을 작성하시기 전에 로그인 해주세요.