react-quill IOS media query

프로젝트에서 게시판을 담당하면서 react-quill 라이브러리를 사용하게 됐다. 반응형을 구현하고 있었고 나는 안드로이드 유저라 핸드폰으로 확인했을때는 아무 문제가 없었다. 그런데 호오오옥시 몰라 아이패드와 친구 아이폰으로 확인을 해봤는데 다른 부분은 모두 반응형 적용이 잘 되는데 딱 quill 부분만 ios에서 media query가 적용이 안 되는 걸 보고 세상이 무너졌다.. ㅠㅠ

거의 한 4시간동안 찾아봤던 것 같은데 너무나도 간단하게 해결이 돼서 울고싶었지만 사실 행복했다...

일단 생각보다 간단하게 해결이 되지 않았던 이유들..
1. 라이브러리이기 때문에 class 명을 자유롭게 변경할 수 없음
2. js로 억지로 반응형 css를 적용하고싶어도 애초에 js로 quill element에 접근하기조차 빡셌음
3. 안드로이드에서도 맥북에서도 아무 문제 없는데 ios 모바일, 아이패드만 적용이 안 되던 상황..그리고 이와중에 난 윈도우 유저라 개발자도구도 이용할 수 없었다는 사실

이전 코드에서는 아래처럼 사용했었고 안드로이드에서는 잘 작동했다.

.quill {
	어쩌구
    media screen and (max-width: 767px){
    	어쩌구
    }
}

근데 IOS에선 작동이 안 돼서
하단에 아예 따로 작성해주었다.
그랬더니 처음엔 작동이 되더니? 새로고침하니까 다시 적용이 안되는 것...
이 과정에서 추측하기에 뭔가 우선순위의 문제인가보다 라고 생각했다

media screen and (max-width: 767px){
    .quill {
    	어쩌구
    }
}

그래서 이것저것 더 시도를 해보다가 결국은 아래와 같은 순서대로 적용을 해주었고 이렇게 했더니 IOS에서도 media query가 잘 작동이 되었다.

@media screen and (max-width: 767px) {
	어쩌구
}

@media screen and (min-width: 768px) {
	어쩌구
}

---

진심 개발자도구 확인이 안 되니까 답답해 미치는 줄 알았다......
ios 저주한다....
하지만 애플 나 취직시켜줘...
이런 나를 받아줘...

혹시라도 react-quill을 사용하시면서 반응형에 어려윰이 있다면 가장 아래 코드 형식처럼 일단 모바일 버전부터 적용해주시고 웹버전을 아래 따로 명시해주시면 잘 될 것입니다. . .