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-mediaquery.js javascript를 사용했지만 여전히 작동하지 않습니다.만약 당신의 미디어 질의가 이 자바스크립트 파일과 함께 작동하기를 원한다면, 당신의 미디어 질의 줄에 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 링크 라인은 위 라인처럼 단순합니다.

아래와 같은 메타 태그를 포함하면 브라우저가 뷰포트 확대/축소를 다르게 처리할 수 있습니다.

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

오늘도 비슷한 상황이 있었습니다.미디어 쿼리가 작동하지 않습니다.잠시 후 저는 'and' 뒤의 공간이 없어진 것을 발견했습니다.적절한 미디어 쿼리는 다음과 같습니다.

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

CSS 코드의 순서도 중요한데, 예를 들어 다음과 같습니다.

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

실행 순서 때문에 위의 코드가 작동하지 않습니다.다음과 같이 작성해야 합니다.

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

항상 px 또는 rem과 같은 장치에서 최대 너비 및 최소 너비를 언급합니다.이것이 저를 위해 그것을 알아냈습니다.단위 없이 숫자 값만 입력하면 브라우저에서 미디어 쿼리를 읽을 수 없습니다.예: 이것은 잘못된 @media 전용 화면 및 (최대 너비:950)이고, 이것은 올바른 @media 전용 화면 및 (최대 너비:950)입니다.

OP의 코드 스니펫은 분명히 올바른 주석 마크업을 사용하지만 CSS는 점진적으로 깨질 수 있습니다. 따라서 구문 오류가 발생하면 그 이후의 모든 것이 실패할 가능성이 높습니다.몇 번 저는 제 스타일 시트를 손상시킨 잘못된 댓글 마크업을 제공하는 신뢰할 수 있는 출처에 의존했습니다.OP가 코드의 일부만 제공했기 때문에, 저는 다음을 제안하고 싶습니다.

이 마크업을 하세요./*...*/MDN에 따라 CSS에 대한 올바른 주석 마크업입니다.

링터 또는 보안 온라인 검증기를 사용하여 CSS를 검증합니다.여기 W3로 하나 있습니다.

가:는 부트스트랩 4의 하러 갔고 그들의 했습니다.저는 부트스트랩 4의 최신 추천 미디어 쿼리 중단점을 확인하러 갔다가 보일러 플레이트를 그들의 문서에서 바로 복사했습니다.에 Javascript 의 코멘트를 .//그것은 내 코드를 깨트렸고, 문제를 해결할 수 있는 암호화된 컴파일 오류만 내게 주었고, 그것은 그 당시 내 머리 위를 지나쳤고 나를 슬프게 했습니다.

IntelliJ 텍스트 편집기를 사용하여 LESS 파일에서 CSS의 특정 행에 대해 ctrl+/ 단축키를 사용하여 주석을 달 수 있습니다. 기본적으로 인식할 수 없는 파일 형식에 삽입된다는 점을 제외하면 매우 좋았습니다.그것은 프리웨어가 아니며 적은 것이 상당히 주류를 이루고 있기 때문에 저는 그것을 믿고 함께 갔습니다.그것 때문에 내 암호가 깨졌어요.각 파일 형식에 대한 올바른 주석 마크업을 알려주는 기본 설정 메뉴가 있습니다.

저도 최근에 이 문제를 접했는데, 나중에 알게 된 것은 공간을 넣지 않았기 때문입니다.and그리고.(이 바로 입니다.

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

그런 다음 수정하기 위해 이것으로 변경했습니다.

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

브라우저 확대/축소 수준이 올바르지 않은 경우에도 발생할 수 있습니다.브라우저 창 확대/축소가 100%여야 합니다.에서는 Chrome을 사용합니다.Ctrl + 0확대/축소 수준을 재설정합니다.

링에 또 다른 답을 던집니다.만약 당신이 CSS 변수를 사용하려고 한다면, 그것은 조용히 실패할 것입니다.

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

CSS 변수는 미디어 쿼리에서 작동하지 않습니다(설계상).

전에 본 적이 없는 이상한 이유:미디어 쿼리 밖에서 "parent > child" 선택기를 사용하는 경우(Firefox 69의 경우) 미디어 쿼리가 중단될 수 있습니다.왜 이런 일이 생기는지는 모르겠지만 제 시나리오에서는...

@media whatever {
    #child { display: none; }
}

하지만 다른 CSS와 일치하도록 부모를 추가하면, 이것은 작동합니다.

#parent > #child { display: none; }

id는 매우 구체적이고 모호성이 없어야 하므로 부모를 지정하는 것은 중요하지 않은 것 같습니다.파이어폭스의 버그가 아닐까요?

HTML의 머리글 섹션에 아래 태그 추가

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

@media 화면이 CSS의 끝에 있어야 한다는 것이 중요합니다.

따라서 몇 가지 방법을 사용합니다.동일한 스타일시트에서 @media(최대 너비: 450px)를 사용하거나, 별도로 헤더에 링크가 올바르게 있는지 확인합니다.저는 당신의 픽스미업을 봤는데 당신은 CSS 링크의 혼란스러운 배열을 가지고 있습니다.HTC desire S에서도 말씀하신 대로 작동합니다.

@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 screen 및 (최대 너비: 930인치)는 (및) & 오프닝 브래킷 @media screen과 (최대 너비: 930인치) 사이에 공간이 필요합니다.

여러분에게 필요한 유일한 해결책은:

A의 끝에 있는 모든 미디어 쿼리를 가져가십시오.CSS 파일

효과적으로 작동, 사용해 보십시오.

나를 위해 내가 지시한 것입니다.max-height대신에max-width.

그게 당신이라면, 가서 바꾸세요!

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

동일한 문제가 있는 모든 사용자에게 "120"만 아니라 "120px"를 실제로 작성했는지 확인합니다.이것은 나의 실수였고 그것은 나를 미치게 했습니다.

음, 제 경우에는,px폭 값이 누락된 후...흥미롭게도, W3C 검증자는 이 오류를 알아차리지도 못했고, 그저 묵묵히 정의를 무시했습니다.

저도 같은 문제를 겪고 있었는데 제 미디어 질문 순서가 잘못된 것으로 드러났습니다.그것들은 CSS에서 가장 큰 것부터 가장 작은 것까지 정의되어야 합니다.

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