반응형 페이지 했는데 pc와 다르게 적용됩니다
관련링크
본문
지금 pc화면에는 이렇게 적용되어있는데
모바일로 들어가보니 이렇게 나옵니다. pc는 ※ 이 버튼을 누르면 오늘의 일정목록이 나오는데
모바일로 들어가보면 그것이 나오지 않습니다 혹시 원인에 대해 알 수 있을까요?
http://www.etj.co.kr/bbs/board.php?bo_table=test&t=20190522&year=2019&month=5
답변 5
레이아웃은 반응형으로 다시잡으셔야겠지만..각 td들에 스타일 word-break주었습니다.
텍스트 길이가 width값을 넘쳐서 생긴 현상같습니다. word-break로 텍스트길이가 width값을 벗어나면 줄넘김 시켰습니다
맞네요... word-break: break-all; 쓰면될것을..왜 전 그생각을 못했을가요?? 천재십니다.ㅋㅋ
긁적긁적..
정말로 감사드립니다ㅠㅠ
그누보드 페이지가 아닌 별도로 만든 페이지라면
뷰포트 설정이 안되어 있는것 같네요.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
이렇게 선언해주셔야 할것 같습니다.
그누보드 달력스킨을 통해서 만들었습니다!
뷰포트 선언 했는데도 마찬가지네요ㅠㅠ
각각의 칸에 width 를 %로 분할해서 주시면 되지않을까요??
100% / 7 = 약 14%
<td width="14%" height="80" bgcolor="#ffffff" valign="top"><a href="./board.php?bo_table=test&t=20190512&year=2019&month=5" title="일정보기">※</a> <a href="./write.php?bo_table=test&f_date=20190512"><font color="red" title="일정추가">12</font></a> <font color=""></font> <font color="red">석가탄신일</font></td>
이렇게 14%각각 되어있는 것 같은데, 아무래도 저 공간 내의 어떤 것의 최소길이가 고정되어있어서 그런 것 같은데... 그걸 모르겠어요 공휴일 써있는 세로줄만 저렇게 안줄어들었더라구요
크롬에서 F12 개발자도구 를 통해서 수정해보세요..
그럼 어디에서 min-width 가 잡혔는지 알수 있습니다.
코드에 min이라고 검색해도 높이값말고는 써진 것은 없습니다!
아 질문글을 이해하지 못했네요.
이미 사전 반응형 작업이 되어있는줄 알았네요.
해당 url 들어가보니 모바일 페이지 코딩이 안되어있으시던데 맞나요?
모바일 접속시 이렇게 나옵니다.
최초접속시 그렇게 나오고 하단에 pc버전을 눌러서 봐야합니다!
작성해주신 링크에서 개발자 도구를 가서 수정해보았습니다.
그리고 너무 많아서 밑부분 TR 은 잠시 지우고 테스트 해보았습니다.
이제 가로 길이가 각각 동일하쥬?
어떤 부분 바꾸셨는지 알려주실 수 있을까요? 제 화면에선 그대로입니다!
우선 이것 저것 다 적용해보았는데요...가장 많이 변화가 오는건 cellpadding 이였습니다.
저 부분을 모두 포함하는 table 의 cellpadding 부분의 변화를 주니 애들이 재정렬을 하더라고요
솔직히 맞는지는 잘 모르겠지만 thead 에 th 부분에 각각 width 값을 부여했습니다.
아~ 이유를 찾은것같네요.. 그치만 근본적인 해결은 아닌듯..ㅠㅠ죄송합니다.
그래도 혹시 몰라 소스 남겨봅니다.
<td width="14%" height="80" bgcolor="#ffffff" valign="top"><a href="./board.php?bo_table=test&t=&year=2019&month=5" title="일정보기">※</a> <font color="blue">25</font><font color="gray"> (음)4.21</font> <font color=""></font> </td>
이 부분을
<td width="14%" height="80" bgcolor="#ffffff" valign="top"><a href="./board.php?bo_table=test&t=&year=2019&month=5" title="일정보기">※</a> <font color="blue">25</font><br><font color="gray"> (음)4.21</font> <font color=""></font> </td>
잘 보시면 날짜 뒤 음력 날짜가 나오면 br 태그로 내려버리시면 잘나오는데..;;근본적인 해결방법이 아닌것같네요..죄송합니다.
아닙니다! 많은 참고가 되었습니다! 가로길이를 14%로 완전고정 시키는 방법을 알아야 될 것 같은데 PHP개발쪽은 아예 배우질 않아서 너무 어렵네요ㅠㅠㅠ css에 기입되어있다면 차라리 쉬울텐데...
