CSS @media 지시어가 모바일 브라우저에서 작동하지 않습니다.

응답 성있는 페이지를 만들기 위해 휴대폰과 같은 소형 장치의 테이블에서 특정 열을 숨기려고합니다. 크롬과 파이어 폭스를 사용하면 내 데스크톱에서 잘 작동하지만, Android 모바일 (Chrome 사용)에서 아래와 같은 간단한 예제를 시도하자마자 화면이 800보다 훨씬 작아도 모든 열이 표시됩니다. 아무 것도 볼 수 없습니다. 왜 작동하지 않는지 분명합니다. 어떤 포인터?CSS @media 지시어가 모바일 브라우저에서 작동하지 않습니다.

<html> 
<head> 
<style> 
@media(max-width: 800px) { 
    th.nomobile, td.nomobile{ 
     display:none; 
     width:0; 
     height:0; 
     opacity:0; 
     visibility: collapse; 
    } 
} 
</style> 
</head> 

<body> 
<table cellpadding="7" cellspacing="1" class="border" width="100%"> 
<tr> 
    <th><strong>Col1</strong></th> 
    <th class="nomobile" style="width: 75px;"><strong>Col2</strong></th> 
    <th class="nomobile" style="width: 75px;"><strong>Col3</strong></th> 
    <th style="width: 225px;"><strong>Col4</strong></th> 
</tr> 
</table> 
</body> 
</html>

출처

2014-08-28 Rob Sedgwick

어떤 전화가 있습니까? – Bioto

나는 안드로이드 moto g을 가지고있다 –

그것은 내 은하계 3에 뉴스 레터에 나와 함께 일어나는 크기로 놀아 난다. 그것은 여전히 규칙적으로 나타난다. –

당신은 아마 당신의 HTML의 헤더에 viewport 메타 태그를 누락, 아래와 같이 간단한 viewport 메타 태그로 시작하고 필요에 따라 그것을 사용자 정의 :

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

여기에 더 많은 정보를 찾기 : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag를

출처

2014-08-28 20:55:28 Arbel

당신은 뷰포트 메타 태그를 포함하지 않는 경우 :

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

을

미디어 쿼리에 CSS/디스플레이 픽셀 (360x640) 대신 화면의 실제 픽셀 (720x1280)이 표시됩니다. 가로 모드에서는 트리거가 달라 지거나 쿼리가 트리거되지 않습니다.

출처

2014-08-28 21:43:10

CSS @media 지시어가 모바일 브라우저에서 작동하지 않습니다.

답변

관련 문제