CSS 불러와서 적용시 모바일에서 글씨등 크기가 틀어져요...
본문
아래 소스처럼 index.php에서 list.php를 불러오면 데스크탑에서는 list.php내용이 잘 표출됩니다.
그런데 모바일에서 보면 글씨크기 및 이미지가 틀어져서요.
list.php를 직접 URL쳐서 보면 모바일에서도 정상적으로 나오는데
꼭 저렇게 불러서보면 틀어지네요.
왜 그런지 알려주세요~ 부탁드려요~~~
index.php
<div id="form">
<div class="wrap">
<div class="list-1">
<?php include_once('list.php')?>
</div>
</div>
</div>
list.php
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.cont4 {background: url(/img/list.jpg)no-repeat center top; height: 775px; width: 100%; margin: 0 auto; position: relative}
.cont4 .counsel_rolling {position: absolute; max-width:100%; left: 85px; top: 200px}
#user_list {max-width:100%}
.cont4 .counsel_rolling .model {width:200px}
.cont4 .counsel_rolling dl {text-align: center}
.cont4 .counsel_rolling dd {float: left; margin-right: 30px}
.cont4 .counsel_rolling li {height: 80px; font-size: 24px; font-weight: bold; vertical-align: middle; line-height: 80px; border-bottom: 1px solid #A3A4C0}
.cont4 .counsel_rolling .status_s img {width: 100px; vertical-align: middle}
.cont4 .box {width: 150px; height: 150px; background: #fff; border-radius: 50%; position: absolute; left: 400px; bottom: 15px}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#countdown .countDiv {width: .35em; height: 1.35em !important}
}
</style>
</head>
<body>
<div class="cont4">
<div class="counsel_rolling">
<ul style="width:100%;">
<div id="user_list" style="text-align:center;">
<ul>
<li>
<dl>
<dd class="date" style="letter-spacing:-1px;">2020-02-04</dd>
<dd class="name" style="letter-spacing:-1px;">제품</dd>
<dd class="tel" style="letter-spacing:-1px;">종류</dd>
<dd class="model" style="letter-spacing:-1px;">크기</dd>
<dd class='status_s'><img src="img/list_t2.jpg"></dd>
</dl>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('#user_list').vTicker({
speed: 1000,
pause: 2000,
showItems: 6
});
});
</script>
<li style="height:1px;line-height:1px;">
<dl style="height:1px;line-height:1px;">
<dd class="date" style="width:130px; letter-spacing:-1px;"> </dd>
<dd class="name" style="width:70px; letter-spacing:-1px;"> </dd>
<dd class="tel" style="width:160px; letter-spacing:-1px;"> </dd>
<dd class="model" style="width:210px; letter-spacing:-1px;"> </dd>
<dd class='status_s' style="width:110px;"> </dd>
</dl>
</li>
</ul>
</div>
</div>
<script src="js/jquery.vticker.js"></script>
</body>
</html>
답변 1
<div id="form">
<div class="wrap">
<div class="list-1">
때문에 해당 css 와 겹쳐서 그런겁니다.
위에 class 부분을 하나씩 삭제해보세요.
답변 감사하니다~ 시도해 볼께요~
