자게 미디어쿼리 연장
http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=991538 내용의 연장에서 의미 전달이 잘못 된것 같아서..
일단 급조한 화면이라서 내용 전달이 잘 될지 모르겠군요...
브라우저의 확대 / 축소 기능을 저시력자용 접근성측면에서 안내해둔 몇몇사이트(국내 관공서포함) 예로 들자면,
확대/축소 기능이 화면너비(디스플레이)를 기준으로 삼는다면,
반응형으로 동일한 컨텐츠를 제공할수있게 구현 할수도 있지만, 화면 크기가 작아지면 일부 컨텐츠는 안보이게 하는 부분도 있습니다. 이럴경우 웹제작자 입장에서도 상당한 이슈가 생길것 같습니다.
저도 지금까지 확대 / 축소 기능이 모바일의 줌 인, 아웃처럼 렌더링 될것으로 예상하고 있었지만, 이번에 새롭게 안 사실이라서 반응형 웹 제작시 상당한 이슈가 될것 같습니다.
이부분에서 오해가 생긴것 같아서 부연 설명을 하면
2번 화면에서 박스친 컨텐츠를 크게 보기 위해서 확대기능을 한단계씩 올림3번 화면에서 의도하지 않게 미디어쿼리가 반응하여서 해당 컨텐츠가 사라져버림
위를 설명하기 위해서 아래와 대충 가정을 해서 말했지만, 의미 전달이 안된것 같습니다.
http://getbootstrap.com/ 이곳을 예로 들겠습니다.
일단 디스플레이크기가 1024x768 브라우저로 접속했고
별도의 돋보기 프로그램을 사용하시는분도 계시겠지만, 브라우저의 자체에서 지원하는 확대기능을 사용하시는분도 계십니다(주변에서 실사용자 목격)
이분이 200% 확대를 했을경우 미디어쿼리가 작동하는게 정상인가?(부트스트랩은 200% 확대시 반응함)
아니면 미디어쿼리는 작동하지 않고 화면 확대만 해야되는게 정상인가?
여기에 전 포커스를 마추고 주장을 이어가고 있습니다.
말씀하신것처럼 디스플레이 크기에 반응형 웹에서의 컨텐츠 접근성은 별게의 문제입니다.
정리하자면 크롬은 화면 확대축소 기능이 디스플레이 크기도 영향을 주면서 렌더링 화면을 확대하는 방식이라서
미디어 쿼리가 작동하는건 정상으로 보여집니다
하지면 제가 말하고자 했던 논점은 확대/축소시 모바일의 줌 인/아웃(그림4,5참조)처럼 작동하지 않을까 오판하고 있다가 PC에서 이런 현상이 일어나서 이게 올바른 작동인가해서 글을 작성했습니다..
1. 노멀 화면

2. 박스친 화면을 보기위해서 확대중

3. 미디어 쿼리의 반응으로 보고자 했던 화면이 사라져버림

4. ipad에서 동일 페이지 접근

5. 최대 확대했지만 미디어 쿼리는 반응하지 않음

댓글 2개
11년 전
아마 말씀하신 '현상'은 잘 전달된것 같습니다.
쟁점은, 위와 같이 나오는 것이
- (미디어쿼리 표준에 따르면) 맞는지 틀리는지
- 바람직 한지, 아닌지
가 아닌가 생각됩니다.
첫번째의 경우 width 기준의 미디어쿼리를 사용하는 경우,
크롬에서 확대/축소를 하게되면 화면폭 자체가 변하기에, 미디어쿼리가 그렇게 변한 화면폭에 반응하는 것은,
표준에 따르면 틀리지 않다고 생각됩니다.
(device-width 를 이용한다면 이런 문제가 해결되지 않을까 합니다.. 크롬에서만 시험해봤습니다.)
두번째는, 자게에서 얘기되는 논점 중의 하나인 접근성에 관한 부분과 겹치면서 발생하는 부분인데..
아마 개인적인 견해의 차이가 있거나, 각각의 프로젝트마다 달라지지 않을까 합니다.
쟁점은, 위와 같이 나오는 것이
- (미디어쿼리 표준에 따르면) 맞는지 틀리는지
- 바람직 한지, 아닌지
가 아닌가 생각됩니다.
첫번째의 경우 width 기준의 미디어쿼리를 사용하는 경우,
크롬에서 확대/축소를 하게되면 화면폭 자체가 변하기에, 미디어쿼리가 그렇게 변한 화면폭에 반응하는 것은,
표준에 따르면 틀리지 않다고 생각됩니다.
(device-width 를 이용한다면 이런 문제가 해결되지 않을까 합니다.. 크롬에서만 시험해봤습니다.)
두번째는, 자게에서 얘기되는 논점 중의 하나인 접근성에 관한 부분과 겹치면서 발생하는 부분인데..
아마 개인적인 견해의 차이가 있거나, 각각의 프로젝트마다 달라지지 않을까 합니다.
11년 전
크롬에서 뷰포트의 width 값을 조절해버리니 미디어 쿼리는 올바르게 작동 되는것이 맞습니다.
이 문제는 브라우저 벤더에서 확대/축소기능의 구현 방식에서 해결되어야할 문제일것 같습니다.
브라우저 크기조절을 반응은 배제 해버린다면 device-width min max값도 하나의 해결책이 될것같습니다.
아니면 JS로 최초 로딩시의 뷰포트 크기를 구해서 선택적으로 CSS를 임포트하는 방법도 있지만, 이건 무지 귀찮을것 같네요
두번째 문제는 최초의 의미 전달을 잘못한 제 책임인듯합니다 ㅠ
이 문제는 브라우저 벤더에서 확대/축소기능의 구현 방식에서 해결되어야할 문제일것 같습니다.
브라우저 크기조절을 반응은 배제 해버린다면 device-width min max값도 하나의 해결책이 될것같습니다.
아니면 JS로 최초 로딩시의 뷰포트 크기를 구해서 선택적으로 CSS를 임포트하는 방법도 있지만, 이건 무지 귀찮을것 같네요
두번째 문제는 최초의 의미 전달을 잘못한 제 책임인듯합니다 ㅠ
게시글 목록
| 번호 | 제목 |
|---|---|
| 17764 | |
| 17761 | |
| 17753 | |
| 17750 |
JavaScript
자바스크립트 메소드 관련..
2
|
| 26370 | |
| 4334 | |
| 4332 | |
| 17749 | |
| 17747 |
JavaScript
클릭하면 레이어로 메뉴영역 올라오는거요~~
1
|
| 26369 | |
| 17746 | |
| 17743 |
기타
쇼핑몰을 구축하려면
2
|
| 17742 | |
| 17740 |
PHP
라이브러리를 만들어서
1
|
| 17738 |
Flash
플래시 작업소스가 없는데
1
|
| 17736 |
MySQL
mysql 커뮤니티 버젼을 사용해서
1
|
| 17734 | |
| 17732 |
JavaScript
flash의 많은 기능들을
1
|
| 30517 |
HTML
php로 사이트 개발시
3
|
| 17729 |
Linux
그누4 에서 메일발송을 사용하려면
2
|
| 17728 |
jQuery
상용 그리드에 버금가는
|
| 17725 |
정규표현식
운전면허번호도
2
|
| 24409 | |
| 17722 |
node.js
node.js 활용사례 좀..
2
|
| 30513 | |
| 17720 |
Mobile
jquery mobile 커스터마이징...
1
|
| 17719 |
PHP
프레임웍 보다는...
|
| 4331 | |
| 17716 | |
| 26368 | |
| 17715 |
node.js
nodeJS 의 scraping
|
| 17713 |
JavaScript
바탕 화면에 생성될 아이콘(파비콘)의 자비스크립트에 대해 에러..ㅠㅠ
1
|
| 17712 |
Mobile
모바일 사이트 링크 걸기..(기본)
|
| 17709 |
JavaScript
ajax호출실패는 어떤 경우에 생기나요?
2
|
| 30511 | |
| 30507 | |
| 30503 | |
| 30500 | |
| 17706 |
JavaScript
스크립트 고수들님.... 초보인데요,,
2
|
| 17704 | |
| 17701 | |
| 17697 |
Mobile
Jindo 모바일 사용해보신분 있으신가요?
3
|
| 17691 | |
| 17685 | |
| 30474 |
HTML
제일 이해안되는 문제..
25
|
| 17674 | |
| 30467 |
HTML
태그 문의드립니다...
6
|
| 17670 |
MySQL
그누보드 innoDB?
3
|
| 17667 |
PHP
무슨뜻일까요>
2
|
| 17664 | |
| 17660 |
MySQL
MYSQL 필드 전체 암호화?
3
|
| 17658 | |
| 17656 | |
| 4325 | |
| 30459 | |
| 4318 | |
| 17653 |
MySQL
SQL Export 하는 중입니다.
2
|
| 30452 | |
| 17649 | |
| 30450 | |
| 30437 | |
| 17647 |
Flash
에러좀 봐주세요...
1
|
| 4315 | |
| 4310 | |
| 30435 |
HTML
스크롤에 따라 변하는 메뉴...
1
|
| 30413 |
HTML
로고 크기에 제한이 있나요?
21
|
| 17646 |
Flash
xml가 로드가 안됩니다ㅠㅠ
|
| 30411 | |
| 17642 |
Linux
윈도우 xp에 리눅스 설치 하면..
3
|
| 17638 | |
| 17636 |
Linux
리눅스 서버 관련 책좀 추천 해주세요..
1
|
| 30407 | |
| 17634 |
node.js
node.js가 간단하게 어떤건가요??
1
|
| 17632 |
MySQL
mysql 튜닝 책 추천 부탁 드립니다.
1
|
| 17627 | |
| 17624 | |
| 17620 | |
| 17619 | |
| 17616 |
Mobile
요즘 하이브리드에 관심이 많아서요..
2
|
| 17614 |
정규표현식
정규식을 공부 하는 방법이 있을까요??
1
|
| 17613 |
MySQL
인덱스 관련해서..
|
| 17609 |
JavaScript
고수님들, jQuery Mobile 은 희망이 없는건가요?
3
|
| 17606 |
MySQL
테이블에 인덱스 걸고 테스트..
2
|
| 17605 |
PHP
사이트 캡쳐 관련해서..
|
| 17601 | |
| 24408 | |
| 17597 |
JavaScript
1차셀렉트값 변경시 2차셀렉트값 변경 질문입니다
3
|
| 4299 | |
| 17594 |
JavaScript
퀵메뉴때매 고생하시는분들을 위한 자작 퀵메뉴 제공 ㅋ
2
|
| 17587 |
JavaScript
주소창에 url직접 입력시에..
6
|
| 17586 |
Flash
플래시 + GD 로 캡쳐하는 방법...
|
| 4295 | |
| 17582 | |
| 17577 |
Linux
리눅스에서 백업 하는 소스입니다.
4
|
| 17569 |
Linux
쉘에서 웹프로그램 실행하기
7
|
| 17568 | |
| 17565 | |
| 30399 | |
| 30394 |
HTML
웹 표준화 관련 사이트들
4
|
| 24400 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기