모바일 적용시 리사이징 문제 (급합니다..)
본문
/theme/eb4_comm_001/page
안녕 하세요
page 부분을 형성후 아이프레임으로 웹을 불러 오려고 합니다.
문제는 아이프레임의 모바일 적용시의 리사이징 문제입니다.
모바일 전체적인 리사이징 방법은 없는지요??
인터넷 서칭 하여 적용 해 보았으나 해답을 찾지 못했습니다..
정말 도움을 간절히 요청 합니다.
<?php
/**
* page file : /theme/THEME_NAME/page/aboutus.html.php
*/
if (!defined('_EYOOM_')) exit;
?>
<style>
<?php if ($eyoom['is_responsive'] == '1' || G5_IS_MOBILE) { // 반응형 또는 모바일일때 ?>
<?php } ?>
</style>
<style>
.livecenter_tab_area { width:855px; }
.livesenter_tab { margin-bottom:0px; }
.livesenter_tab ul { width:855px; height:68px; }
.livesenter_tab li {position:relative;float:left;height:68px;font-size:10px;}
.livesenter_tab a { display:block; margin-right:-2px; width:73px; height:68px; background:url('https://image.named.com/score_web/namedscore/sp_tab_mod_daridari_v4.png') no-repeat; text-align:center; }
.livesenter_tab a:hover { position:relative; z-index:10; }
.livesenter_tab a.on { position:relative; margin-right:0px; z-index:20; }
.livesenter_tab .tx { display:none; }
.livesenter_tab .game_num { position:absolute; top:6px; min-width:10px; text-align:center; left:30px; padding-right:5px; height:13px; font-size:10px; font-family:"Trebuchet MS", "Lucida Grande", "Tahoma","Helvetica","Arial", "hiragino kaku gothic pro", "나눔고딕", "Nanum Gothic" , "Nanum GothicOTF" ,Gulim,"굴림", sans-serif; font-weight:bold; background:url('/img/livecenter/sp_gamenum.png') no-repeat right -20px; color:#ffffff; }
.livesenter_tab .game_num em { display:block; padding-left:5px; height:13px; line-height:12px; background:url('/img/livecenter/sp_gamenum.png') no-repeat; }
.livesenter_tab .named a { width:105px; background-position:0 0; }
.livesenter_tab .total a { background-position:-85px -167px; margin-right:3px;}
.livesenter_tab .football a {background-position:-90px 0;}
.livesenter_tab .baseball a { background-position:-170px 0; }
.livesenter_tab .basketball a { background-position:-250px 0; }
.livesenter_tab .volleyball a { background-position:-330px 0; }
.livesenter_tab .icehockey a { background-position:-410px 0; }
.livesenter_tab .nfl a { background-position:-490px 0; }
.livesenter_tab .game a { background-position:-570px 0; }
.livesenter_tab .etc a { background-position:-650px 0; }
.livesenter_tab .multi a { background-position:-829px 0; }
.livesenter_tab .named a:hover { background-position:0 -90px; }
.livesenter_tab .total a:hover { background-position:-85px -257px; }
.livesenter_tab .football a:hover { background-position:-90px -90px; }
.livesenter_tab .baseball a:hover { background-position:-170px -90px; }
.livesenter_tab .basketball a:hover { background-position:-250px -90px; }
.livesenter_tab .volleyball a:hover { background-position:-330px -90px; }
.livesenter_tab .icehockey a:hover { background-position:-410px -90px; }
.livesenter_tab .nfl a:hover { background-position:-490px -90px; }
.livesenter_tab .game a:hover { background-position:-570px -90px; }
.livesenter_tab .etc a:hover { background-position:-650px -90px; }
.livesenter_tab .multi a:hover { background-position:-829px -90px; }
.livesenter_tab .named a.on { background-position:0 -90px; }
.livesenter_tab .total a.on { background-position:-85px -257px; }
.livesenter_tab .football a.on { background-position:-90px -90px; }
.livesenter_tab .baseball a.on { background-position:-170px -90px; }
.livesenter_tab .basketball a.on { background-position:-250px -90px; }
.livesenter_tab .volleyball a.on { background-position:-330px -90px; }
.livesenter_tab .icehockey a.on { background-position:-410px -90px; }
.livesenter_tab .nfl a.on { background-position:-490px -90px; }
.livesenter_tab .game a.on { background-position:-570px -90px; }
.livesenter_tab .etc a.on { background-position:-650px -90px; }
.livesenter_tab .multi a.on { background-position:-829px -90px; }
#hd ul, nav ul, #ft, ul ol, ul, li {margin:0;padding:0;list-style:none;}
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="livesenter_tab">
<ul>
<li class="total"><a target="score" class="total" href="https://sports.named.com/major"> <span class="ic_dot"></span></a></li>
<li class="football "><a target="score" class="football" href="https://sports.named.com/soccer"><span class="ic_dot"></span></a></li>
<li class="baseball "><a target="score" class="baseball" href="https://sports.named.com/baseball"></a></li>
<li class="basketball "><a target="score" class="basketball" href="https://sports.named.com/basketball"><span class="ic_dot"></span></a></li>
<li class="volleyball "><a target="score" class="volleyball" href="https://sports.named.com/volleyball"><span class="ic_dot"></span></a></li>
<li class="icehockey "><a target="score" class="icehockey" href="https://sports.named.com/hockey"><span class="ic_dot"></span></a></li>
<li class="nfl "><a target="score" class="nfl" href="https://sports.named.com/football"></a></li>
<li class="game "><a target="score" class="game" href="https://sports.named.com/lol"></a></li>
<li class="etc "><a target="score" class="etc" href="https://sports.named.com/starcraft"></a></li>
<li class="empty_tab"></li>
</ul>
</div>
<iframe name="score" scrolling="yes" frameborder="0" src="https://sports.named.com/major" style="display:inline;border:none;height:1500px;width:100%;
padding-top:10px; position: relative; ; "></iframe>
<style>
.page-icon {
padding:0px 20px;
}
.page-icon img {
width:34px; border-radius:50%; margin-bottom:5px;
}
@media all and (max-width:480px) {
.responsive .page-icon { padding:0px; }
.responsive .page-icon .pull-right { float:none !important; }
}
</style>답변 2
위 예시코드는 말그대로 예시 코드입니다.
해당 방법으로 아이프레임 내부의 body 엘리먼트에 접근하는 방법을 알려드린건데..
부모에서 자식 아이프레임 접근만 하면 내부는 알아서 구워드실수 있습니다..
이해가 안가신다면... 흠... 뭐라 드릴말씀이 없네요...
아이프레임 로드후 아래 스크립트로
아이프레임 내부 엘리먼트를 컨트롤 할 수 있습니다.
// img 태그를 찾아서 스타일지정
$("#아이프레임아이디").contents().find("img").attr("style","width:100%;height:100%")
// img 태그를 찾아서 클래스 부여
$("#아이프레임아이디").contents().find("img").addClass("fancy-zoom")
img 가아니라..웹 사이트 인데요
답변을 작성하시기 전에 로그인 해주세요.
