혹시 이 코드에 반응형을 추가할수는없나요?
본문
<div class="tradingview-widget-container">
<div id="tradingview_1f9bd"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 820,
"height": 330,
"symbol": "BINANCE:BTCUSDT",
"interval": "1",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "kr",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_1f9bd"
}
);
</script>
</div>
이 위젯 소스를 반응형으로 바꿀수있나요??
답변 1
소스를 직접 구성 해드릴수는 없습니다.
이론은 이렇습니다. 사용자의 브라우저크기나 드래그해서 움직이는 값을 체크 합니다.,
- 엘리먼트의 넓이와 높이 (단 , 마진만 제외)
$(window).width()
$(window).height()
- window의 넓이와 높이 (단, 메뉴바, 툴바, 스크롤바의 크기는 제외)
$(document).width()
$(document).height()
그래서 변수를 만듭니다.
var mlang=$(document).width();
그것을 전달 합니다.
"width": mlang,
"height": 330,
또한 전달 할때 창의 크기를 체크할때 if 문을 쓰셔서 제어 하시면 됩니다.