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>치환 해서 임시방편으로 하긴했는데요.
뭔가 정상이 아니 느낌이네요 ㅠㅠ
좋은 방법 아시는분 도움 좀 부탁드립니다.
답변 3
지금 작성하신 css 코드만으로는 문제가 있는 부분이 보이지 않습니다.
아마 더 상위의 존재에게 폰트 사이즈가 있거나 다른 css 또는 스크립트에 의한 폰트 조정 등이 있을 경우가 있을 수 있습니다.
이상이 있는 사이트의 주소를 직접 보여주시는게 더 좋은 방법으로 보입니다.
@내가누구야 님 답글 감사합니다.
상위는 <div class="item">를 감싸는 <div>만 있고 폰트지정이 없습니다. ㅠㅠ
그리고 상위와 관계가 있다면 줄바꿈이 아닐때는 어째서 잘나오는지요?
줄빠꿈도 상위와 관계가 있는지요?
경우의 수를 말씀드린것입니다. 제가 지금 열공님의 모든 코드를 읽어본것이 아니기에 정확한 답변을 드리기 어려웠던 부분이지요. 줄바꿈이 폰트에 영향을 주는 경우는 0%에 가깝지 않을까요?
딱 보여주시는 부분만으로 html을 구성하셔서 모바일에서 확인해보시는 것도 하나의 방법일듯합니다.
모바일체크를 실제 휴대폰을 활용한 것인지 아니면 브라우저의 모바일 버전을 활용한것인지에 따라서도 다른 결과가 나올 수 있구요
@내가누구야 네~ 특정 코드만으로 질문 올린거니 파악이 쉽진 않은게 맞죠. ㅠ
혹 저와 비슷한 사례나 css고수님이라면 알수도 있지않을까 하고 올린겁니다.
테스트는 웹부라우저가 아닌 실제 폰에서 한겁니다.
의견 감사합니다.
폰트 사이즈를 em으로 하지 않고 px단위로 변경해서 해보시는건 어때요?
@내가누구야 님 px로도 해봤어요~ ㅠㅠ
px로 했는데도 글자가 커진다면 실제폰이 아닌 브라우저의 모바일모드를 이용해서도 한번 테스트 해보시고 다른 폰에서도 한번 해보시는걸 추천드릴게요. 가끔 핸드폰 자체의 폰트 크기나 특성을 먹는 경우도 있는것 같았습니다.
예를 들어 웨일 브라우저의 기능에 모바일창 으로 본다거나 크롬브라우저의 개발자모드에서 모바일 버전으로 확인하신다거나
@내가누구야 님 시간 내주셔서 감사합니다.
현재는 제가 아는 모든 방법과 말씀해주신 여러방법을 다 해봤는데 해결이 안되네요 ㅠㅠ
우선은 <br />를 <span>치환 해서 임시방편으로 그냥 써야겠네요.
나중에 문제가 생기면 그때 고민 해봐야겠어요.
이거만 쳐다보고 이리저리했더니 눈알이 다 아프네요 ^^;;
폰트 사이즈가 먹히지 않으면
font-size:15px !important;
이런식으로 해 보세요..
@설국열차 님 댓글 감사합니다.
다 해봤는데도 현 제 페이지에선 답을 못 찾았네요~^^;
홈페이지 위의 문구를 넣어서 해봤는데 피시와 모바일에서 두가지 모두 정상적으로 잘 보입니다.
부모요소나 @media 스타일에서 또는 자바스크립트로 영향을 미치고 있을 가능성이 높아 보입니다.
부모요소들을 하나씩 제거해 가면서 시험해 보세요...
@설국열차 네~ 차근차근 하나씩 찾아봐야죠
관심 과져주셔서 감사합니다^^
저도 이 문제를 겪고 있는데 해결하셨는지요?
제사이트내에서
일부 회원분들중에들께서, 모바일에서 글자크기가 좀 다르다 페이지별로도 다르게 나오기도하고
너무 작아서 안보인다는 의견을 듣고 테스트 해보려고 했는데
저는 문제없이 잘나오고 다른 대다수 회원들도 문제가 없다는데, 꼭 그런분들이 계시더라구요
그래서 이 현상을 다른분들에게 질문했을때 같은 페이지를 봐도
나는 문제가 없어서 의견을 줄수가 없다는 의견을 많이 받았는데요.
어느날 우연히 체크하다보니, 모바일 핸드폰설정 디스플레이에서 개개인별로 글자크기를 확대해서 쓰시거나
작게 해서 쓰시는분들이 계시던데, 안드로이드폰에서, 그 기능을 했을경우
디스플레이가 달라지다보니, 웹사이트내의 글자가 영향을 받아서 만든사람의 의도와는 상관없이
폰트사이즈가 화면에 맞춰져 커진다던지 작아진다던지 하더라구요
그게 또 반응형도 되야하니 원래 당연했던것인가? 하는 생각을 해봤고
그래서 sir등등 체크해봤는데....sir이나 다른 사이트들은 이 영향을 안받더라구요.
특히 댓글창같은경우는, 그런변동을 하더라도 sir같은경우는 폰트사이즈가 고정으로 잘 나오더라구요
이경우는 !important는 당연히 안먹히고, 미디어쿼리 로 조절도 안먹히고
아마도 디스플레이가 달라지면서, height값이 없다보니 임의적으로 변동을 시키는 느낌인데요.
공지적으로 나오는글을 height값을 명시한다면 글자크기가 고정은 되더라구요.
결국 width:100%;display:inline-block; 등으로 임의로 조절해서 쓰기도 해보는정도에
스크립트로 글자를 고정해보기도 했는데, 혹시 근본적인 문제를 해결하셨는지 문득 궁금해서
글을 적어봅니다.
