모바일, 메타 세트에서 미디어 쿼리가 작동하지 않습니다.

모바일 장치에서 미디어 쿼리가 사용되지 않는 문제가 있습니다. 이것은 브라우저에서는 올바르게 작동하지만 모바일 기기에서는 작동하지 않습니다 (실제로 Lumia 800과 iPhone 폰간에 다르게 렌더링되는 것처럼 보입니다). 저는이 문제에 대한 대부분의 게시물을 여기에서 보았습니다. 대부분의 경우 사람들은 메타 태그를 생략했지만 문서의 머리 부분에 이미 설정했습니다.모바일, 메타 세트에서 미디어 쿼리가 작동하지 않습니다.

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

이 내 모바일 CSS 파일입니다

/* ===== == = === 20em (320px) === = == ===== */ 

@media screen and (min-width : 20em) { 
    .slidercontainer { 
     display:none; 
    } 
} 
@media only screen and (min-width : 30em) { 
} 

/* ===== == = === 37.5em (600px) === = == ===== */ 

@media only screen and (min-width: 37.5em) { 
} 

/* ===== == = === 48em (768px) === = == ===== */ 

@media only screen and (min-width : 48em) { 
    .slidercontainer { 
     display:inherit; 
    } 
} 

/* ===== == = === 56.25em (900px) === = == ===== */ 

@media only screen and (min-width : 56.25em) { 
} 

/* ===== == = === 68.75em (1100px) === = == ===== */ 

@media only screen and (min-width : 68.75em) { 
    .container { 
     width:1200px; 
    } 

} 


/* ===== == = === 81.25em (1300px) === = == ===== */ 

@media only screen and (min-width : 81.25em) { 

}

그리고 머리 지역에서 나는 또한이 스타일을

포함,에 .. 물론, 모바일과 일반 CSS 및 모바일과 기본 하나 스타일 :

<link href="css/default.css" rel="stylesheet" type="text/css" /> 
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all"/>

당신은 장치 감지를 변경할 수 있습니다

출처

2013-10-05 Kjarri

사이트를 볼 수 있다면 도움이 될 것입니다. 다양한 장치에서 테스트 할 수있는 링크가 있습니까? –

안녕하세요! 답장을 보내 주셔서 감사합니다! 네, 그 http://dev.krummalingur.com/jspiping – Kjarri

내 대답을 참조하십시오. –

은 내가 헤더 문서 만

<html> 
<head>

을하는 데 사용 보인다 문제를 발견,하지만 난

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

로 변경하면 그것은뿐만 아니라 모바일 스타일 시트를 사용하기 시작 ! 신참 실수 :

모두에게 제안을 주셔서 감사합니다!

출처

2013-10-06 10:33:39 Kjarri

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld"/>

을3210

또는, 화면 크기 감지를 변경할 수 있습니다

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>

당신은 미디어 유형에 대한 자세한 내용을보실 수 있습니다 : http://www.w3.org/TR/CSS2/media.html

출처

2013-10-05 12:23:43

안녕하세요! 제안 해 주셔서 고마워요,하지만 불행히도 전혀 변한 것 같지 않습니다. ( – Kjarri

-1

당신이 좋아하거나 부트 스트랩 3 모바일 첫 번째 프레임 만약한다면이 방법을 사용하여 시도를 직장

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
}

출처

2013-10-05 12:33:55 user2814461

안녕하세요! 저는 이것을 시도했지만 여전히 슬프게도 같은 것입니다. (모바일 장치가 스타일 시트를 전혀 사용하지 않는 것과 같습니다. 감사합니다! 감사합니다! – Kjarri

나는 이것이 CSS 미디어 쿼리 문제인지 완전히 확신 할 수 없습니다.

데스크톱에서도 c.1240px 아래 가로 스크롤 막대를 가져옵니다.

나는 이것이 <div class="sidebox">과 관련이 있다고 생각합니다. Chrome의 개발자 도구 (Firebug) 나 Firebug를 사용하여 사이트를 검사하면 someelements가 컨테이너에서 빠져 나가는 것을 분명히 알 수 있습니다.

이것은 위치 지정 문제이거나 정의 된 px 너비와 % -widths를 섞어서 발생하는 것으로 생각됩니다.

출처

2013-10-05 20:44:35

컨테이너에서 빠져 나오더라도 (나는 당신을 가리켜 주셔서 감사합니다 :)) .slidercontainer는 모바일 버전에서 완전히 사라져야합니다. 포지셔닝이 될 수 있다고 생각합니까? 그것도 영향을 줍니까? – Kjarri

꽤 가능합니다. 절대적인 포지셔닝은 사용법을 가지고 있지만 배치 레이아웃에는 실제로 권장되지 않습니다. –

모바일, 메타 세트에서 미디어 쿼리가 작동하지 않습니다.

답변

관련 문제