헐... 미디어쿼리에 함정이 있었네요 ㄷㄷ
반응형 제작시 미디어쿼리를 사용한다면 브라우저 자체 확대,축소기능에도 반응한다는 불편한 진실을 알려드립니다...
실험방법
브라우저 크기를 작게 해두시고 화면 축소를 해보시면 고해상도 미디어 쿼리가 반응합니다.
브라우저 크기를 크게 해두시고 화면 확대를 하시면 저해상도 미디어 쿼리가 반응합니다.
저만 모르고 있었던 내용이라면 죄송합니다 (_ _)
추신) 지인분의 실험정신에 감사드리며...
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 21개
브라우저의 크기를 조절하는것은 디스플레이의 크기를 조정하는것이지만 확대, 축소 기능은 부가 기능으로 돋보기와 같은 역할을 한다면 브라우저 벤더의 설계상의 문제인듯합니다..
레티나 디스플레이와 같이 디바이스단에서 처리된다면 미디어쿼리가 반응하는것도 이해되는부분이지만,
비슷한 기능의 모바일의 initial-scale 같이 렌더링 되는게 맞다고 생각합니다.
그냥 단순하게 생각해서요. 화면 너비에 반응하게 만들어놨는데, 화면이 확대되거나 축소됐다고 가로스크롤링을 하는 상황이 온다는 건... 글쎄요. 브라우저 제작자들 의도는 둘째 치고, 웹사이트 제작자 입장에서는 환영할 만한 일은 아닐 것 같네요. ^^;;
전진님이 오셔서 의견 좀 주시면 좋을 것 같다는 생각도 들고요.
+ 지금 모바일에서 확인해보니 모바일은 동상이몽님 말씀대로 처리가 되고 있는 것 같네요.
확대/축소 기능이 화면너비(디스플레이)를 기준으로 삼는다면,
반응형으로 동일한 컨텐츠를 제공할수있게 구현 할수도 있지만, 화면 크기가 작아지면 일부 컨텐츠는 안보이게 하는 부분도 있습니다. 이럴경우 웹제작자 입장에서도 상당한 이슈가 생길것 같습니다.
저도 지금까지 확대 / 축소 기능이 모바일의 줌 인, 아웃처럼 렌더링 될것으로 예상하고 있었지만, 이번에 새롭게 안 사실이라서 반응형 웹 제작시 상당한 이슈가 될것 같습니다.
컨텐츠가 나타났다 사라졌다했을 때 가장 문제가 되는 건, 웹 사이트를 외워서 사용하는 분들의 경우인데 이에 해당하는 분들이 위에 말씀드린 형태로 사용하는 경우는 거의 없을 것이라는 거죠.
그래서 반응형 웹이 가진 웹 접근성의 최대 난점이면서 동시에 별거 아닌 문제이기도 합니다.
그리고 화면 확대가 되었을 때 분명히 작은 해상도의 스타일이 적용되고 있기는 하지만 글자 크기도 이미 확대된 상태로 표현되고 있기 때문에 현재 처리되고 있는 방식이 정상적이라고 느끼는 것입니다.
일단 디스플레이크기가 1024x768 브라우저로 접속했고
별도의 돋보기 프로그램을 사용하시는분도 계시겠지만, 브라우저의 자체에서 지원하는 확대기능을 사용하시는분도 계십니다(주변에서 실사용자 목격)
이분이 200% 확대를 했을경우 미디어쿼리가 작동하는게 정상인가?(부트스트랩은 200% 확대시 반응함)
아니면 미디어쿼리는 작동하지 않고 화면 확대만 해야되는게 정상인가?
여기에 전 포커스를 마추고 주장을 이어가고 있습니다.
말씀하신것처럼 디스플레이 크기에 반응형 웹에서의 컨텐츠 접근성은 별게의 문제입니다.
암튼 근본적인 부분에 대해서 고민하시는 모습에서 무언가 배우게 된것 같습니다. 계속 성실히 응해주셔서 고맙습니다.^^
모바일의 줌 아웃 기능은 돋보기 기능으로 볼 수 있구요.
컨텐츠의 크기를 확대시키는 JS를 추가하는 방법도 있겠지만,
근래의 브라우저는 대부분 확대 기능이 구현돼 있어니 이를 적극적으로 활용하고 안내하는게 맞다고 생각하고 있습니다.
사실 이 문제는 JS 등 언급하신 것 보면 동상이몽님이나 저나 같은 관점인데 글만 다를 뿐인 것 같네요. ^^
px 대신 em을 사용해서 피할 수 있다고 들은것 같습니다.
그리고, 미디어쿼리는 표준이지 구현이 아니기에, 예상하신 것과 다른 결과를 보셨다면
브라우져 구현에 문제가 있거나, 잘못 예상하고 계신것이겠죠.
http://sir.co.kr/bbs/board.php?bo_table=pb_talk&wr_id=1296 보충 설명입니다.
width 대신 device-width를 사용하면 어떨까요?
크롬에서 화면확대/축소를 하면, 화면폭 px 자체가 변하므로
width 기준으로 만들어진 미디어쿼리가 반응하는 것은 맞지 않나 합니다.
추가적인 의견은
http://sir.co.kr/bbs/board.php?bo_table=pb_talk&wr_id=1296
이곳으로 남겨주세요 ^^;