부뚜두뚜랩에서 모바일웹 지원을 하려고 이것 저것 찾아보다가 얻게된 자료 공유!
export const getWindowSize = () => {
return {
width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
};
};
export const getViewportSize = () => {
const width = getWindowSize().width;
return width >= 1200 ? 'lg' : width >= 992 ? 'md' : width >= 768 ? 'sm' : 'xs';
};
현재 sm
을 쓰고 있는지 md
를 쓰고 있는지, 아니면 아예 lg
를 쓰고 있는지 판별해주는 오버헤드 없는 코드. 사실 제일 확실한건 div.visible-sm
과 같은 DOM elmemt 여러개를 만들어서 판별하는 것도 있지만.. 음. 내 취향이 아니여서 이렇게 구현.
위 코드의 일부는 여기에서 가져옴!
뱀발로, 현재 브라우저의 창 크기에 따라서 Bootstrap grid system이 챱챱 정렬해줄 텐데, col-sm-5, col-sm-5, col-sm-2 의 순서로 |A|B|C|가 하나의 div.row에 들어가있는 경우에 width가 768 보다 작아지면
|A|
|B|
|C| 와 같이 정렬되는 것을
|B|
|A|
|C| 와 같이 바꾸는 방법도 찾았는데
pull, push를 써서 해주면 되는 부분이었다.
위 예시는 여기서 가져옴!