blogger 를 모바일 브라우져로 보면 width 폭이 작게 잡힌다.
유튜브와 같은 고정폭(width="560")의 iframe 경우 동영상 영역이 body 밖으넘어 가게 된다.
다음과 같이 device-width 로 모바일에서도 폭을 자동으로 계산하도록 되어 있었다.
<meta content='width=device-width, initial-scale=1' name='viewport'/>
그런데 device-width 는 deprecated 된 기능이다.
크롬의 경우 버전1 (Released 2008-12-11)
엣지의 경우 버전12 (Released 2015-07-28)
까지만 지원된다고 한다.
위 라인을 삭제하니 모바일에서도 데스크톱과 같은 화면으로 볼 수 있다.
그리고 이제는 다음과 같이 media 쿼리로 각 width 에 맞게 css 설정을 분기한다.