개발자
프론트 앤드 미디어쿼리를 사용한 ios반영
프론트 앤드 신입입니다 미디어 쿼리를 사용해서 모바일과 pc 버전을 구현하고 있습니다. pc와 안드로이드로 보면 제가 의도한대로 잘 보이는 것이 ios는 뭔가 달라서 고생 야무지게 하고있습니다.... d 😭😭😭😭😭 문제점 네모칸이 정사각형이어야하는데 직사각형이된다. 백그라운드 색상이.. 구분이 안갈정도로 옅다 코드는 간략하게 아래와 같습니다 ```ts <table className="order-2 border-separate border border-solid border-crossline-gray w-fit md:mx-0 md:row-span-4 md:col-span-2"> <tbody> {map.map((cols: string[], colIndex: number) => { return ( <tr key={uuidv4()}> {cols.map((space: string, rowIndex: number) => { return ( <td className={`relative border-2 md:border-[3px] border-solid border-crossline-gray `} > <p className="absolute m-1 md:m-2"> {crosswordIdx()} </p> <input className={`m-0 w-10 h-10 xs:w-11 xs:h-11 sm:w-12 sm:h-12 md:w-16 md:h-16 text-center `} } /> </td> ); })} </tr> ); })} </tbody> </table> ``` 읽어봐주셔서 감사하고 도움 주시면 감사하겠습니다
답변 2
화면 너비의 차이는 아닌가요?
익명
작성자
2023년 11월 09일
아니요 아이폰의 경우 가로길이가 넓어서 양옆 마진이 남는데도.. 그렇더라구요
aspect-ratio를 줘보세요. 가로만 width지정하고 aspect-ratio: 1/1
익명
작성자
2023년 11월 10일
도움 주셔서 감사합니다. 오늘 신나는 마음으로 width만 지정해주고 aspect-ratio: 1 / 1 를 해줬으나 해결은 되지 않았습니다.. aspect-ratio는 새롭게 알게 된 지식이라 앞으로도 잘 응용해보겠습니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 09일
iOS는 자체적인 렌더링 방식 때문에 CSS가 다른 환경과 조금 다르게 작동할 수 있습니다. ### 문제 1: 네모칸이 직사각형으로 보임 `width`와 `height`를 고정 값으로 주었지만, 여전히 정사각형이 아니라면 padding 이나 border 제외한 순수한 width와 height 크기를 확인해보세요. CSS box model에서는 padding과 border도 요소의 총 너비와 높이에 포함되므로, 이 부분 간과하면 예상치 못한 형태로 보일 수 있습니다. ### 문제 2: 백그라운드 색상이 옅게 보임 CSS에서 사용하는 색상값은 대부분의 경우 모든 브라우저에서 동일하게 표현됩니다. 하지만 화면의 밝기 설정, 컬러 프로필 등에 따라 사용자에게 보여지는 최종 색상은 달라질 수 있습니다. iOS 디바이스에서 색상이 옅게 보인다면, `-webkit-text-size-adjust` 또는 `-webkit-appearance` 같은 웹킷 전용 스타일을 확인해보세요. 아직도 문제가 해결되지 않는다면, 실제 디바이스나 시뮬레이터에서 개발자 도구를 사용해 요소의 스타일을 직접 확인하고 테스트해보시는 것이 좋을 것 같습니다. 본문에서 제공한 코드만으로는 정확한 원인을 파악하기 어렵습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!