DIV가 미디어 쿼리를 사용하는 모바일 장치에서 숨길 수 없음

표시해야하는 두 개의 큰 div를 숨김으로써 웹 사이트의 특정 페이지를 모바일 친화적으로 만들기 위해 노력하고 있습니다. , 그리고 b) 페이지의 흐름을 분해하십시오. DIV가 미디어 쿼리를 사용하는 모바일 장치에서 숨길 수 없음

현재 전혀 영향을주지 않습니다 그러나

@media only screen and (max-width : 768px) { 
 
div.example { 
 
display: none !important; 
 
visibility: hidden; 
 
} 
 
}

를 사용하여, 크롬에서 내 LG의 G2에서 테스트.

"예"에 대한 CSS는 : 내가 잘못 뭐하는 거지

div.example { 
 
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1; 
 
height: 941px; 
 
width: 1209px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
background-color: #ffffff; 
 
}

? 크기로 볼 수 있듯이 표준 모바일 장치에 비해 너무 큽니다 ... iPad & 데스크톱 해상도에서 완벽하게 보이며 강제로 요청 된 데스크톱 사이트 버전도 모바일에 잘 표시됩니다.

도움을 주시면 감사하겠습니다.

출처

2014-12-19 GeezerTD

LG G2의 해상도는 1080 x 1920이며 max-width: 768px보다 큽니다. 미디어 쿼리가 실패했습니다. 용도 :

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

세로 방향 장치 용. 더 나은 점은 다른 픽셀 비율로 대상 장치에 -webkit-device-pixel-ratio을 사용할 수 있다는 것입니다. 여기 고화소 비 장치의 일반적인 미디어 쿼리이다 :

FYI, LG의 G2는 webkit-device-pixel-ratio: 3가

업데이트 (Reference 참조)를 갖는다

https://gist.github.com/marcedwards/3446599

출처

2014-12-19 04:10:36 Raptor

감사 @Raptor; 네, 나중에 디바이스 사양을 볼 때 이것을 깨달았습니다. 불행히도 나는 1080p 넓이로 그것을 올렸지 만 그것은 여전히 테스트를 거친 iPad에서 DIV를 제거하는 작업을했지만 전화로는 작동하지 않았다. 내가 태블릿에 표시하고자 할 때 여기에서 이길 수는 없다. iPad는 망막이 아닌 오래된 버전이므로 1080p는 태블릿의 콘텐츠를 차단하기에 충분하다. 일반적으로 픽셀 기반 미디어 쿼리 대신 장치 대 픽셀 비율을 권장 하시겠습니까? 고마워. – GeezerTD

예, 장치가 잘못 식별 될 수 있으므로 너비 대신 장치 대 픽셀 비율을 권장합니다. – Raptor

<!doctype html> 
<html> 
<head> 
<style> 
@media only screen and (max-width : 768px) { div.example { display: none; } } 
div.example { 
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg'); 
background-repeat: no-repeat; 
border: 3px solid #ecf0f1; 
height: 941px; 
width: 1209px; 
margin-left: auto; 
margin-right: auto; 
background-color: #ffffff; 
} 
</style> 
</head> 
<body> 
<div class="example"></div> 
</body> 
</html>

출처

2014-12-19 04:17:21

DIV가 미디어 쿼리를 사용하는 모바일 장치에서 숨길 수 없음

답변

관련 문제