모바일 크롬브라우저 CSS 미디어쿼리 적용이 안됨
본문
제 사이트는 e-madeinkorea.net 입니다
아래 CSS가 모바일 삼성인터넷 브라우저에서는 잘 적용이 되는데
모바일 크롬부라우저에서는 1000px 이하에서는 적용이 안되고 있습니다
고수님들이 개발자도구로 힌트를 주시거나 문제를 해결해 주시면 고맙겠습니다
.my-container {
width: 100%;
}
@media (max-width: 767px) {
.woocommerce ul.products li {
overflow: hidden;
}
.woocommerce ul.products li.product a img {
width: 185px;
height: 185px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
clip-path: inset(25%);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.woocommerce ul.products li {
overflow: hidden;
}
.woocommerce ul.products li.product a img {
width: 250px;
height: 250px;
background-color:white;
object-fit: contain;
transform: scale(3.0);
clip-path: inset(32%);
}
}
@media (min-width: 1025px) {
.woocommerce ul.products li.product a img {
width: 276px;
height: 276px;
background-color:white;
object-fit: contain;
}
}
@media (max-width: 767px) {
.rtwpvg-wrapper .rtwpvg-slider img {
width: 373px;
height: 373px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
clip-path: inset(25%);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.rtwpvg-wrapper .rtwpvg-slider img {
width: 390px;
height: 390px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
clip-path: inset(25%);
}
}
답변 2
@media css 는 본 css 밑에 넣으셔야되요.
안그럼 media css 먼저 읽고 원래 css 를 나중에 읽어버려서 원래 css 대로 불러오게 됩니다.
본 css에 넣어봤는데 그대로 입니다
head.sub.php 뷰포트 부분에
<?php
if (G5_IS_MOBILE) {
echo '<meta name="viewport" id="meta_viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta name="viewport" id="meta_viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
}
이렇게 pc와 mobile 둘다 동일하게 줘보세요~
