모바일 응답 이상 함

-1

그래서 저는 두 가지 컨테이너와 하나의 가입 양식이있는 웹 페이지를 매우 간단하게 설정하고 있습니다. CSS로 설정된 배경 이미지를 제외하고 컨테이너는 비어 있습니다. 이 웹 페이지가 미디어 쿼리를 사용하여 화면 크기에 따라 다르게 응답하도록 노력하고 있습니다. 바탕 화면에 대해서는 정상적으로 작동합니다. 예를 들어 페이지 크기를 720px 미만으로 조정하면 컨테이너의 배경 이미지가 그에 따라 적절하게 조정됩니다. 문제가 시작되는 곳은 내 모바일 장치에서 응답하지 않는 곳입니다.모바일 응답 이상 함

나는 시작 지점으로 Galaxy S3를 사용하고 있습니다. 해상도는 720x1280px입니다. 그러나 미디어 쿼리가 모바일 브라우저에 아무런 영향을 미치지 않는 것처럼 보입니다.

@media only screen and (max-height: 720px) and (-webkit-device-pixel-ratio: 2) { 

#header { 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    background:url(".../header.jpg") no-repeat fixed; 
    background-size:500px auto; 
} 

}

이미 내 <head>하지만 뷰포트 태그를 추가 한 :

여기

#header { 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    background:url(".../header.jpg") no-repeat fixed; 
    background-size:contain; 
    background-position:center; 
}

은 삼성 갤럭시 S3에 대해 구성된 미디어 쿼리 : 그것은 데스크톱과 노트북에 표시 방법은 다음과

입니다 여전히 내 코딩에서 원하는 응답을 얻지 못했습니다. 내가 뭔가 잘못하고 있는거야? 다른 장치를 벤치 마크로 사용해 볼까요?

출처

2014-12-23 Matthew

최대 높이는 720px가 아닌 1280px와 상호 관련됩니다. 적어도 Chrome에서는 갤럭시 S3의 기본 방향이 세로입니다. 최대 너비 설정 : 720px.

미디어 쿼리가 최신 버전 일 때 다시 작동시키는 데 어려움이 있으므로 "유일한"키워드를 사용하지 않습니다.

@media screen and (max-width: 720px) and (-webkit-device-pixel-ratio: 2) { 

}

을 또는 간단하게 및 수행이 같은 쿼리를 시도

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

}

가 BTW은 그 종종 최대 폭을 사용하지 않는 것이 가장 좋습니다. 가장 작은 화면의 스타일을 지정하고 최소 너비를 사용하여 더 큰 화면으로 이동하려고합니다.

그리고 픽셀 밀도 때문에 Galaxy가 훨씬 작은 화면 너비를보고 할 수 있습니다. 여기에 360px라고 표시됩니다. http://www.mydevice.io

출처

2014-12-23 20:34:21 tsookram

감사하지만이 방법은 실패로 판명되었습니다. – Matthew

{background-color : red;}와 같이 분명한 규칙을 설정하여 룰셋이 작동하는지 확인하십시오. – tsookram

모바일 응답 이상 함

답변

관련 문제