미디어쿼리 디바이스 크기에 대해
볼수록매력
미디어쿼리를 조정하고 있는 중인데요,
이게 지금 기기마다 디바이스 크기와 해상도가 워낙에 다양해서 갈피를 못 잡겠습니다.
제가 모든 기기를 다 사서 해볼 수도 없는 일이고, 사실상 심지어 태블릿을 써본 적도 없어서
태블릿에 탑재된 브라우저의 성질이 PC와 동일한지, 아니면 스마트폰과 동일한지도 알 수가 없네요.
일단 그런 상황인지라 제가 알고자 하는 것은, 만일 태블릿이 PC보단 스마트폰과 브라우저 성질이 비슷할 경우
jQuery의 스크롤 기능 관련해 제가 구현하려는 기능이 적어도 스마트폰에서 봤을 때는 문제가 심각하기에
그것을 디바이스별로 구분해서 조건문으로 해당 스크립트를 PC 에서만 실행하게 하려는 건데요.
스크립트 자체는 정확한 기기 구분 코드가 있어서 그냥 조건문으로 그렇게만 처리하면 되는데
문제는 뭐냐면... CSS에서 미디어쿼리로 특정 화면크기 이상에선 해당 형태의 메뉴(작은 크기와 다름)가 뜨게 해놨는데,
그 크기 이상에선 반드시 그 스크립트가 필요하거든요.
그런데 jQuery 코드에선 정확히 스마트폰, 태블릿, PC를 구별할 수가 있는데
CSS 미디어쿼리로는 그 구별이 안 되자나요? 그냥 사이즈로만 구별해야 하는데 CSS에선 기기구분이 안 되고
요즘 태블릿은 거진 최소 PC 화면크기를 능가하는 애들이 나와주고 있어서 어떻게 경계를 구분지어야 할지 모르겠습니다.
제가 썼지만 글 구조상 이해하기 힘들 것 같네요. 어떻게 글로 전달해야 이해하시기 쉬울지 어렵게 느껴지네요.
나름대로 정리해보자면...* 메뉴 형태 1 , 메뉴 형태 2 (모바일 브라우저 전용) 가 있습니다.
* 메뉴1은 PC에서만 떠야 합니다. (태블릿이 PC와 브라우저상 스크롤 작동이 동일한지 몰라서 일단 저는 무조건 mobile과 tablet은 배제하고 싶습니다) == 메뉴1에는 반드시 스크롤 관련 연산을 수행하는 jquery 스크립트가 필요합니다.
* 메뉴2는 모바일과 태블릿 표시용이며 , 이건 모바일에서만 테스트해보니 jquery 스크립트가 필요치도 않은 메뉴인데다 스크립트가 있을 시에는 치명적인 스크롤 에러가 계속 나서 화면을 볼 수가 없고 터치 드래그를 해도 마치 캐시된 양 직전의 위치로 자동 이동해버려 이 스크립트를 배제시켜야 합니다.
* JS로 폰, 태블릿, PC를 정밀하게 구분하는 소스코드는 있습니다. 그래서 조건문으로 그 스크립트를 if 폰, 태블릿일 땐 실행하지 않게 하면 됩니다.
* 그런데 문제는 CSS에서는 미디어쿼리 사용해봤자 크기로만 대충 적용 스타일시트를 구분할 뿐, 정밀하게 폰인지 태블릿인지 PC 인지는 구별 못 합니다. (CSS 코드를 jQuery에 넣어 보내는 방식은 CSS 분량이 너무 많아 바람직하지 않습니다)
두 메뉴는 반드시 CSS가 필수적이며, 그 CSS가 각 메뉴별로 갈려서 적용되는데, 이때 PC용 표시 메뉴에는 반드시 스크롤 스크립트가 적용돼야 하는데, CSS의 미디어쿼리 사이즈구분과 jQuery의 정밀한 기기구분은 서로 완벽한 일대일 대응이 아니기 때문에
예를들어, CSS에서 제가 미디어쿼리로 width 960 이상을 PC겠거니 해서 PC용 메뉴가 뜨게 지정했다고 가정하더라도
jQuery에서 구별한 정밀 기기구분에서 만약 1080 사이즈부터 만을 PC로 구분하게 될 경우 (어디까지나 예입니다. 사이즈 기준점을 정확히 몰라서) CSS로는 분명 PC에 표시돼야 할 PC메뉴1이 뜨는데 스크롤 계산 스크립트는 960~1080 구간 사이에 적용되지 않아 문제가 되는 것입니다.
그래서 저는 CSS 미디어쿼리를 위한 정확한 기기화면의 사이즈 수치를 알고 싶습니다. 태블릿과 PC의 가장 확실한 경계점은 어떤 사이즈인가요?
또 문제는 이게 가로로 눕혔을 때까지도 감안해야 하기에 정말 미치겠습니다.
그래서 가로든 세로든 태블릿이 가능한 최대 너비가 몇 px인지 궁금합니다.
태블릿 최대 크기가 1080인가? 그렇다고 2012년도 글에서 발견하긴 했는데 확실한지 세월이 많이 흘러버린 지금도 유효한지
더 큰 사이즈의 태블릿이 등장한 것은 아닌지 걱정입니다.
사실 저는 PC용 메뉴를 적어도 PC에서 960 가로 레이아웃 이상부터 표시하고 싶었는데,
태블릿이 그보다 크다면 포기해야죠 뭐... 흑흑
모바일 메뉴는 아무리 이쁘게 꾸며본들 커다란 화면에서는 정말 아니라고 생각돼요.
아니면 정녕... 메뉴를 불확실 구간에 표시할 형태를 하나 더 추가해서 3종류로 만들어야 할지 걱정입니다.
