묻고답하기
웹페이지 크기를 모바일 장치에 맞게 자동 조절하기
2014.02.13 17:21
안녕하십니까 ?
질문 그대로 작업한 웹 페이지가 모바일 장치에따라 화면이 다른 크기로 보입니다.
혹시 이 문제에 도움이 될 만한 팁을 급히 요청합니다
감사합니다
좋은 하루 되세요
댓글 5
-
CTN
2014.02.13 17:26
-
헤르만
2014.02.13 20:46
구글에서 미디어쿼리를 검색하니 아래 내용을 찾았습니다
<link rel="stylesheet" type="text/css" href="css/card_480.css" media="only screen and (max-width:539px)" />
<link rel="stylesheet" type="text/css" href="css/card_540.css" media="only screen and (min-width:540px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="css/card_600.css" media="only screen and (min-width:600px) and (max-width:719px)" />
<link rel="stylesheet" type="text/css" href="css/card_720.css" media="only screen and (min-width:720px) and (max-width:767px)" />
<link rel="stylesheet" type="text/css" href="css/card_768.css" media="only screen and (min-width:768px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="css/card_800.css" media="only screen and (min-width:800px)" />그런데 이 부분을 어떻게 하면 되나요?
CSS 파일에 넣으면 되나요
그럼 어느경로에 넣어야 하는지요?
아직 초보라 모르는것이 많네요 ^ ^ -
CTN
2014.02.14 05:03
웹페이지가 장치마다 다르게 보이는 것은 장치마다 각 해상도가 다르기 때문입니다. 그래서 해당 기기에 맞도록 미디어쿼리를 이용해서 css를 다르게 적용시키는 방식으로 여러기기에 대응하도록 만드는 것이 요즘 많이 사용하는 반응형웹페이지들입니다.
기존에 만드신 작업을 아마도 다소 수정하셔야 할 듯 보입니다.
아니면 구글에서 뷰포트 검색하셔서 헤드스크립트에 뷰포트로 해상도 지정해서 던져넣으시면 기기에서 그 해상에 맞도록 잡아줄 겁니다.
기기마다 대응해서 작업을 하시려면 미디어쿼리나 반응형웹 같은 것을 검색하셔서 일정 부분 이상의 글들을 읽어 보셔야 합니다. 간단하게 여기서 글로 모두 해결되기는 좀 어려운 부분인 것 같습니다.
아래 가보시면 예전 여기 팀장을 맡으셨던 정찬명님 글이 제법 있을 겁니다. 하나씩 보시면서 작업하시면 될 듯합니다.
-
헤르만
2014.02.14 18:21
답변 감사합니다. 일단 더 내공을 샇아야 되겠군요 ^.^
-
sundriespds
2014.10.06 14:54
그냥 html 페이지에 적용하실거라면 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0, user-scalable=no, target-densitydpi=medium-dpi" /><!--모바일페이지크기조절메타태그--> 이것도 도이 될것같아 그냥 지나가다가 올려드립니다.
구글에서 미디어쿼리 검색해보시죠.