css 모바일 폰트크기 문제
본문
.item {position:relative;display:block;align-items:center;padding:10px;margin:10px;}
.item_1 {display:block;font-size:0.9em;}
.item_1 strong {display:block;}
.item_1 span {width:100%;display:inline-block;}
//.item_1 span {} // 비워도 안되고
//.item_1 span {width:100%;} // 안되고
//.item_1 span {display:inline-block;} // 안되고
//.item_1 span {display:block;} // 안되고
// 아래처럼하면 잘됩니다. 즉) 줄바꿈이 안되면 지정한 크기로 잘나옵니다.
//.item_1 {display:block;font-size:0.9em;white-space:nowrap;overflow:hidden;}
// 문제는 줄빠꿈만되면 폰트가 커져버립니다.
아래와 같으면 모바일에선 글자 크기가 크게 보입니다.
<div class="item">
<div class="item_1">
<strong>멘트</strong>
<span>안녕하세요?<br />
오늘은 날씨가 무지하게 좋으네요.<br />
오늘 뭘하고 놀면 재미있고 즐겁게 하루를 보낼수있을까요?<br />
좋은 아이디어 있음 알려주세요.</span>
</div>
</div>
.item_1 span {width:100%;display:inline-block;}
위처럼 하고 아래와 같으면 줄바꿈 관계없이 정상적으로 폰트크기가 잘 나옵니다.
<div class="item">
<div class="item_1">
<strong>멘트</strong>
<span>안녕하세요?</span>
<span>오늘은 날씨가 무지하게 좋으네요.</span>
<span>오늘 뭘하고 놀면 재미있고 즐겁게 하루를 보낼수있을까요?</span>
<span>좋은 아이디어 있음 알려주세요.</span>
</div>
</div>
현재 <br />를 <span>치환 해서 임시방편으로 하긴했는데요.
뭔가 정상이 아니 느낌이네요 ㅠㅠ
좋은 방법 아시는분 도움 좀 부탁드립니다.
답변 2
지금 작성하신 css 코드만으로는 문제가 있는 부분이 보이지 않습니다.
아마 더 상위의 존재에게 폰트 사이즈가 있거나 다른 css 또는 스크립트에 의한 폰트 조정 등이 있을 경우가 있을 수 있습니다.
이상이 있는 사이트의 주소를 직접 보여주시는게 더 좋은 방법으로 보입니다.
@내가누구야 님 답글 감사합니다.
상위는 <div class="item">를 감싸는 <div>만 있고 폰트지정이 없습니다. ㅠㅠ
그리고 상위와 관계가 있다면 줄바꿈이 아닐때는 어째서 잘나오는지요?
줄빠꿈도 상위와 관계가 있는지요?
경우의 수를 말씀드린것입니다. 제가 지금 열공님의 모든 코드를 읽어본것이 아니기에 정확한 답변을 드리기 어려웠던 부분이지요. 줄바꿈이 폰트에 영향을 주는 경우는 0%에 가깝지 않을까요?
딱 보여주시는 부분만으로 html을 구성하셔서 모바일에서 확인해보시는 것도 하나의 방법일듯합니다.
모바일체크를 실제 휴대폰을 활용한 것인지 아니면 브라우저의 모바일 버전을 활용한것인지에 따라서도 다른 결과가 나올 수 있구요
@내가누구야 네~ 특정 코드만으로 질문 올린거니 파악이 쉽진 않은게 맞죠. ㅠ
혹 저와 비슷한 사례나 css고수님이라면 알수도 있지않을까 하고 올린겁니다.
테스트는 웹부라우저가 아닌 실제 폰에서 한겁니다.
의견 감사합니다.
폰트 사이즈를 em으로 하지 않고 px단위로 변경해서 해보시는건 어때요?
@내가누구야 님 px로도 해봤어요~ ㅠㅠ
px로 했는데도 글자가 커진다면 실제폰이 아닌 브라우저의 모바일모드를 이용해서도 한번 테스트 해보시고 다른 폰에서도 한번 해보시는걸 추천드릴게요. 가끔 핸드폰 자체의 폰트 크기나 특성을 먹는 경우도 있는것 같았습니다.
예를 들어 웨일 브라우저의 기능에 모바일창 으로 본다거나 크롬브라우저의 개발자모드에서 모바일 버전으로 확인하신다거나
@내가누구야 님 시간 내주셔서 감사합니다.
현재는 제가 아는 모든 방법과 말씀해주신 여러방법을 다 해봤는데 해결이 안되네요 ㅠㅠ
우선은 <br />를 <span>치환 해서 임시방편으로 그냥 써야겠네요.
나중에 문제가 생기면 그때 고민 해봐야겠어요.
이거만 쳐다보고 이리저리했더니 눈알이 다 아프네요 ^^;;
폰트 사이즈가 먹히지 않으면
font-size:15px !important;
이런식으로 해 보세요..
@설국열차 님 댓글 감사합니다.
다 해봤는데도 현 제 페이지에선 답을 못 찾았네요~^^;
홈페이지 위의 문구를 넣어서 해봤는데 피시와 모바일에서 두가지 모두 정상적으로 잘 보입니다.
부모요소나 @media 스타일에서 또는 자바스크립트로 영향을 미치고 있을 가능성이 높아 보입니다.
부모요소들을 하나씩 제거해 가면서 시험해 보세요...
@설국열차 네~ 차근차근 하나씩 찾아봐야죠
관심 과져주셔서 감사합니다^^
