flex를 사용한 탭 만들기에서 간단한 탭 만드는 방법을 알아봤습니다. 그런데 스마트폰에서 볼때는 의도한 데로 표시되지 않는 것을 볼 수 있습니다. 이는 모바일 브라우저에서 인식하는 스타일이 다르기 때문으로, 다음과 같이 -webkit-
접두어를 추가해 주면 됩니다.
1 2 3 4 5 6 7 8 | .container{ display: -webkit-flex;/* for mobile */ display: flex; } .container .child{ -webkit-flex:auto;/* for mobile */ flex:auto; } |
이제 스마트폰에서도 대부분의 경우에는 원하는 결과를 얻을 수 있습니다. 그러나 우리의 기대를 저버리지 않는 갤레기 일부 갤럭시 시리즈에서는 제대로 동작하지 않습니다. 이런 일부 스마트폰을 위해서는 다음과 같이 두 줄의 코드를 더 추가해야 합니다.
1 2 3 4 5 6 7 8 9 10 | .container{ display:-webkit-box;/* for galaxy */ display: -webkit-flex;/* for mobile */ display: flex; } .container .child{ -webkit-flex:auto;/* for mobile */ flex:auto; width:33.3%;/* for galaxy */ } |
여기서 병맛인건, width
값은 탭의 갯수에 따라서 1/n 값으로 적용해야 한다는 점입니다. 예를 들어 2개이면 50%, 4개이면 25% 처럼 말이죠.
그래서 대안으로 자바스크립트를 사용해서 리스트의 갯수에 따라서 width 값을 입력해 주는 스크립트를 사용할 수 있습니다.
1 2 3 4 | $(function(){ var lis = $("ul.flex_container > li"); lis.width((100 / lis.length) + "%"); }); |
이제 모바일에서도 원하는 결과를 얻을 수 있습니다.
- 111
- 222
- 333