CSS3 미디어 쿼리가 모바일 장치에서 작동하지 않는 이유는 무엇입니까?

CSS3 미디어 쿼리가 모바일 장치에서 작동하지 않는 이유는 무엇입니까?

---

styles.css에서 미디어 쿼리를 사용하고 있으며 둘 다 변형을 사용합니다.

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

창을 축소하면 일반 브라우저 (Safari, Firefox)에서 원하는 레이아웃으로 사이트 크기가 조정되지만 휴대 전화에는 모바일 레이아웃이 전혀 표시되지 않습니다. 대신 기본 CSS 만 표시됩니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

---

이 세 가지 모두 유용한 팁이지만 메타 태그를 추가해야하는 것처럼 보입니다.

<meta content="width=device-width, initial-scale=1" name="viewport" />

이제 Android (2.2)와 iPhone 모두에서 작동하는 것 같습니다 ...

---

미디어 쿼리 위에 표준 CSS 선언이 있어야 합니다. 그렇지 않으면 쿼리가 작동하지 않습니다.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

---

키워드 only가 문제 일 수 있습니다. 다음과 같은 미디어 쿼리 사용에 문제가 없습니다.

@media screen and (max-width: 480px) { }

---

언론 사이트에서 부트 스트랩을 사용했지만 IE8에서는 작동하지 않습니다. css3-mediaqueries.js 자바 스크립트를 사용했지만 여전히 작동하지 않습니다. 미디어 쿼리 가이 자바 스크립트 파일과 함께 작동하도록하려면 CSS의 미디어 쿼리 라인에 화면을 추가하십시오.

다음은 예입니다.

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css 위의 행처럼 간단한 행 연결.

---

오늘 나는 비슷한 상황을 겪었다. 미디어 쿼리가 작동하지 않았습니다. 얼마 후 나는 'and'이후에 그 공간을 발견했다. 적절한 미디어 쿼리는 다음과 같아야합니다.

@media screen and (max-width: 1024px) {}

---

있는지 확인 CSS는 모두 사용이 마크 업 코멘트 /*... */- MDN에 따라 CSS에 대한 올바른 주석 마크 업이

나는 그들의 문서에서 부트 스트랩 4 미디어 쿼리를 직접 복사했으며 모든 쿼리에는 동일한 자바 스크립트 스타일의 주석 태그가 붙어 있습니다 //!

또한 IntelliJ 텍스트 편집기를 사용하면 LESS 파일에서 특정 CSS 행을 주석 처리 할 수 ​​있지만 자동으로 사용됩니다 //. 프리웨어가 아니기 때문에 제대로 된 것으로 생각했습니다. 이 동작을 수정하기위한 환경 설정 메뉴가 있습니다.

또한 신뢰할 수있는 온라인 유효성 검사기로 CSS를 확인하십시오. 여기 W3에 의해 하나

---

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

---

나는 몇 가지 방법을 사용합니다. 동일한 스타일 시트에서 @media (max-width : 450px)를 사용하거나 별도로 별도의 헤더에 링크가 있는지 확인하십시오. 나는 당신의 fixmeup을 보았고 당신은 CSS에 대한 혼란스러운 링크 배열을 가지고 있습니다. 그것은 당신이 HTC 욕망 S에 대해 말하는 것처럼 행동합니다.

---

나를 위해 max-height대신 표시 했습니다 max-width.

그것이 당신이라면, 그것을 바꾸십시오!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

---

It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.

---

I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (. This was the error

@media screen and(max-width:768px){
}

Then I changed it to this to correct it

@media screen and (max-width:768px){
}

---

Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS variables don't work in media queries (by design).

참고URL : https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working-on-mobile-devices