bootstrap current viewport

부뚜두뚜랩에서 모바일웹 지원을 하려고 이것 저것 찾아보다가 얻게된 자료 공유!

 

---

 

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를 써서 해주면 되는 부분이었다.

위 예시는 여기서 가져옴!