테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

모바일 적용시 리사이징 문제 (급합니다..) 채택완료

NOLcurryTV 4년 전 조회 2,139
답변 2
목록

/theme/eb4_comm_001/page 

안녕 하세요 

page 부분을 형성후 아이프레임으로 웹을 불러 오려고 합니다.

문제는 아이프레임의 모바일 적용시의 리사이징 문제입니다.

모바일 전체적인 리사이징 방법은 없는지요??

인터넷 서칭 하여 적용 해 보았으나 해답을 찾지 못했습니다..

정말 도움을 간절히 요청 합니다.

 </p>

<p><?php

/**

 * page file : /theme/THEME_NAME/page/aboutus.html.php

 */

if (!defined('_EYOOM_')) exit;

?></p>

<p><style>

<?php if ($eyoom['is_responsive'] == '1' || G5_IS_MOBILE) { // 반응형 또는 모바일일때 ?>

<?php } ?>

</style></p>

<p>

<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('<a href="https://image.named.com/score_web/namedscore/sp_tab_mod_daridari_v4.png')" target="_blank" rel="noopener noreferrer">https://image.named.com/score_web/namedscore/sp_tab_mod_daridari_v4.png')</a> 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; }</p>

<p>.livesenter_tab .named a.on { background-position:0 -90px; }</p>

<p>.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; }</p>

<p>#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;

}</p>

<p>.Flexible-container iframe,

.Flexible-container object,

.Flexible-container embed {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

} </p>

<p></style>

<div class="livesenter_tab">

<ul>

<li class="total"><a target="score" class="total" href="<a href="https://sports.named.com/major">" target="_blank" rel="noopener noreferrer">https://sports.named.com/major"></a> <span class="ic_dot"></span></a></li>

<li class="football "><a target="score" class="football" href="<a href="https://sports.named.com/soccer"><span" target="_blank" rel="noopener noreferrer">https://sports.named.com/soccer"><span</a> class="ic_dot"></span></a></li>

<li class="baseball "><a target="score" class="baseball" href="<a href="https://sports.named.com/baseball"></a></li>" target="_blank" rel="noopener noreferrer">https://sports.named.com/baseball"></a></li></a></p>

<p><li class="basketball "><a target="score" class="basketball" href="<a href="https://sports.named.com/basketball"><span" target="_blank" rel="noopener noreferrer">https://sports.named.com/basketball"><span</a> class="ic_dot"></span></a></li>

<li class="volleyball "><a target="score" class="volleyball" href="<a href="https://sports.named.com/volleyball"><span" target="_blank" rel="noopener noreferrer">https://sports.named.com/volleyball"><span</a> class="ic_dot"></span></a></li>

<li class="icehockey "><a target="score" class="icehockey" href="<a href="https://sports.named.com/hockey"><span" target="_blank" rel="noopener noreferrer">https://sports.named.com/hockey"><span</a> class="ic_dot"></span></a></li>

<li class="nfl "><a target="score" class="nfl" href="<a href="https://sports.named.com/football"></a></li>" target="_blank" rel="noopener noreferrer">https://sports.named.com/football"></a></li></a>

<li class="game "><a target="score" class="game" href="<a href="https://sports.named.com/lol"></a></li>" target="_blank" rel="noopener noreferrer">https://sports.named.com/lol"></a></li></a>

<li class="etc "><a target="score" class="etc" href="<a href="https://sports.named.com/starcraft"></a></li>" target="_blank" rel="noopener noreferrer">https://sports.named.com/starcraft"></a></li></a>

<li class="empty_tab"></li>

</ul>

</div>

<iframe name="score" scrolling="yes" frameborder="0" src="<a href="https://sports.named.com/major"" target="_blank" rel="noopener noreferrer">https://sports.named.com/major"</a> 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>

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
애

위 예시코드는 말그대로 예시 코드입니다.

해당 방법으로 아이프레임 내부의 body 엘리먼트에 접근하는 방법을 알려드린건데..

부모에서 자식 아이프레임 접근만 하면 내부는 알아서 구워드실수 있습니다..

 

이해가 안가신다면... 흠... 뭐라 드릴말씀이 없네요...

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

애

아이프레임 로드후 아래 스크립트로

아이프레임 내부 엘리먼트를 컨트롤 할 수 있습니다.

 

// img 태그를 찾아서 스타일지정
$("#아이프레임아이디").contents().find("img").attr("style","width:100%;height:100%")
// img 태그를 찾아서 클래스 부여
$("#아이프레임아이디").contents().find("img").addClass("fancy-zoom")
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

N
NOLcurryTV
4년 전
img 가아니라..웹 사이트 인데요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인