본문 바로가기

Javascript/활용팁&실전예제

HTML 테이블과 아이프레임의 반응형 웹 지원 추가

반응형

반응형 웹, 또는 모바일 웹에서는 컨텐츠를 표현할 때 테이블과 아이프레임은  가능하면 피해야 하는 요소입니다.

이 두 태그는 컨텐츠의 표현 방법이 모바일이나 반응형에 적합하지 않고, 고정 크기를 가지는 경우가 많아, 모바일 기기에서 화면이 오른쪽으로 밀려나는 문제점을 발생시킵니다.


모바일 기기의 특성상 위/아래 스크롤만 되어야 하는데, 테이블이나, 아이프레임에 정한 크기값이 모바일 기기 가로보다 넓으면 크기 만큼 오른쪽으로 스크롤이 가능하게 됩니다.


너비가 모바일 대응이 되도록 테이블이나 아이프레임 너비를 가로 100%로 지정하면, 테이블이나 아이프레임의 내용이 아래로 한없이 길어지는 문제가 나타납니다.


최고의 방법은 아니지만 모바일 레이아웃이 유지되면서 테이블과 아이프레임만 좌우로 스크롤해서 내용을 확인할 수 있도록 자바스크립트로 전처리를 할 수 있습니다.


방법은 간단해서 테이블과 아이프레임을 모바일 레이아웃에 맞는 <div></div> 태그로 감싸고, 가로 스크롤이 가능하도록 해주면 됩니다.



// 모바일에서 테이블 감싸서 스와이프로 볼 수 있게 함.
function wrapTable(){
  var tables = document.querySelectorAll("body table");

  iftables.length > 0 ){
    tables.forEach(function(table){
      table.outerHTML = '<div class="mobile-wrapper">'+table.outerHTML+'</div>';
    });
  }
}

//모바일에서 아이프레임 감싸서 스와이프로 볼 수 있게 함.
function wrapIframe(){
  var iframes = document.querySelectorAll("body iframe");

  ififrames.length > 0 ){
    iframes.forEach(function(iframe){
      iframe.outerHTML = '<div class="mobile-wrapper">'+iframe.outerHTML+'</div>';
    });
  }
}

document.addEventListener('DOMContentLoaded', ()=>{
  if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
    wrapTable();
    wrapIframe();  
  }
});



모바일 기기이면 각각 아이프레임과 테이블에 대해 <div></dov> 태그로 감싸 모바일 기기 100% 영역을 넘지 않도록 합니다.


"mobile-wrapper" 클래스는 모바일 기기 가로 화면에 맞춰 가로 스크롤바가 생길 수 있도록


.mobile-wrapper {
  overflowauto;
  width100%;
}


이렇게 해주면 웹 레이아웃도 깨지지 않고 모바일 기기에서 테이블과 아이프레임만 따로 가로로 스와이프를 해서 확인할 수 있게 됩니다.



반응형

닫기