미디어쿼리로 반응형웹
본문
미디어쿼리를 사용하여 반응형 웹을 만들고자 합니다!
데스크탑에서 확인하면 반응형이 잘 나타납니다.
그런데 모바일에서 사이트접속시에 그냥 width:980px; 이상일때 피씨에서 나타내는 버전으로만 표현되요!!ㅠㅠ
아이폰6용 미디어쿼리를 사용하면 잘 적용이 되긴 합니다.
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) { }
하지만 모바일 기기별로 다 따로 설정하자니 너무 번거롭고 기기도 많아
아래의 미디어쿼리처럼만 나누어서 하려고 했더니 모바일에서 적용이 안되네요...ㅠ_ㅠ
아이폰6인 경우 스크린캡쳐 한 사진이 539 × 960 인걸 보니 539px 가 아이폰6의 가로사이즈 아닌가요?
그러면 734px > 539px > 489px 이니까 max-width: 734px 에서 적용했던 css들이 적용되어 나타나야하는것 아닌가요...
모바일 버전css도 사용 안할거라
<?php
if (defined('G5_IS_ADMIN')) {
echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;
} else {
echo '<link rel="stylesheet" href="'.G5_CSS_URL.'/'.('default.css').'">'.PHP_EOL;
}
?>
이부분도 이렇게 바꾸었습니다..
흑흑.. 제가 뭘 잘못알고있다면 알려주셔요..ㅠㅠ
( { } 안에는 css 적용한것은 생략했습니다.)
@media only screen and (max-width: 734px) { }
@media only screen and (max-width: 489px) and (min-width: 320px) { }
<?php
if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=no">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}
답변 1
else 담에 뷰포트 넣어주세요 즉 피시모드에 뷰포트 빠짐(모바일부분에 있는거 복사해서 붙이기)
와 ㅠㅠㅠ 정말정말 감사드려요!1 모바일모드는 어차피안쓰니까 모바일부분에적힌거 없애구 밑에 엘스다음에 붙였습니다 아주아주 잘되네요 사랑합니다
답변을 작성하시기 전에 로그인 해주세요.
