PC에서의 모바일 버전과 실제 모바일의서의 CSS가 다르게 적용되는 현상
본문
안녕하세요:)
많은 도움받고 있습니다.
배우는 입장에서에는 도저히 답이 나오지 않아 문의드립니다.
PC에서 모바일 버전으로 접속 후 주문하기를 눌러도 실제로는 모바일이 아닌 것을 알아차리고 PC용 결제 화면으로 띄우는 것은 대략적으로 느끼고 있습니다.
하지만 크롬 확장기능을 이용하여 휴대폰모드로 접속하면 결제 화면또한 모바일용으로 들어가는것을 확인하였는데요.
아래화면과같이 동일한 버튼임에도 크롬으로 접속한모습과 모바일에서의 CSS가 다르게 적용된것이 확인이됩니다. 왜그러는걸까요?
아래 사진으로 내용을 요약해봅니다.
1.사파리로 모바일 화면 접속
2.크롬 확장 기능으로 모바일 화면 접속
3.실제 아이폰에서의 화면
답변 3
취소하기와 결제등록하기에 동일한 css 를 넣었다고 해도
input 이냐 아니냐에 따라 다르게 작동합니다.
아이폰의 사파리 브라우저가 그렇습니다.
PC에 설치되는 사파리 브라우저는 몇년전부터 더이상 업그레이드가 안되고 있습니다.
맥의 사파리와 PC의 사파리는 버전이 완전히 다릅니다.
답변 감사드립니다 :)
말씀하신 내용을 토대로 검색하니 갈피를 잡은것 같습니다.
감사합니다
https://sir.kr/pb_tip/2407
저건 css 로 그린게 아니라 아이폰 자체 UI 겠죠 ?
class 나 form이나 그런데 걸려서 딸려오는 브라우저 기본 UI ?
피씨도 파폭크롬익플 서로 조금씩 다르잖아요...
체크박스 모양도 다르고..기본버튼 모양도 다르고..
그래서 그런거 아닐까요 ??
저 화면을 안드로이드 폰에서 보면 또 다르게 보일것 같은데요.
답변 감사합니다 :)
그렇다고 하기엔 이상한 부분이 많네요.
취소 버튼과 동일하게 CSS를 줬음에도 한 개의 버튼만 적용이 되지 않은 부분도 설명이 되지 않고요.
체크박스 같은 경우 말씀하신 대로 스타일을 주지 않았을 경우 기본 디자인이지만 색상이 적용이 안된 건 이상하네요 ㅠ_ㅠ
아이폰이 원래 그런줄은 알고 있지만, 구체적으로 어느 부분에서 그런 것인지 기록해두지않아 모르겠습니다.
방금 ‘비회원 구매’를 실행해보았는데
‘주문하기’ 버튼이 그렇게 출력되네요.
’사파리’, ‘크롬’ 둘다...
안드로이드 폰은 그렇지않네요.
제 나름대로 쉽게 생각해본 결과
IOS에서는 input 버튼에 기본적으로 CSS가 적용이 되어있는 것 같습니다.
그렇기 때문에 MacOS의 사파리나 크롬의 경우는 보이지 않았던 거고요.
이를 CSS 초기화라는 작업을 통해 진행을 하니 해당 증상이 사라졌습니다. 실제 그누보드 CSS 파일 윗부분을 살펴보니 이러한 증상이 버튼에만 있는 것이 아니라 초기화를 진행했던 것들이 남아있네요