모바일에 영향을 미치지 않는 CSS 미디어 쿼리

Question

나는 확장 성/응답 성이 높아야하는 tumblr 테마를 만들고 있습니다. 중앙 집중식 그리드의 게시물 일뿐입니다. 브라우저 창의 크기를 추적하기 위해 CSS 미디어 쿼리를 사용하여 그리드의 크기를 조정/중심 조정합니다. 그들은 현재 다음과 같이 :

<link rel='stylesheet' media='screen and (max-width: 640px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 640px) and (max-width: 959px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 960px) and (max-width: 1279px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 1280px) and (max-width: 1599px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 1600px) and (max-width: 1919px)' href='URL.css' /> 

640 폭 밖으로 Maxes 첫번째는, 나는 파이어 폭스/크롬 창을 작게 크기를 조정할 때 완벽하게 작동하지만, 모든 휴대 기기에서 작동하지 않을 것 같다. 내 휴대 전화는 Droid Razr Maxx이며 "세로"방향에서도 960 픽셀 너비로 기본 설정되어 있습니다.

나는 모바일 크기의 스타일로 스타일의 기본을 가지고 시도했지만 같은 결과를 얻을, 이것은 내가 자주 쿼리를 다루는 다른 이유 (Internet Explorer가 서비스를 제공합니다.)

Answer 1

을위한 최적의 이상도 이하 - 모바일 브라우저에서 볼 때 문제는 때로는 장치 사양이 말하는 픽셀의 정확한 크기가 아닙니다. 특히 어떤 종류의 확대/축소를 사용하는 경우 특히 그렇습니다. 제가하고 싶은 일은 정확하게 간단한 jquery 경고를 사용하여 뷰포트의/문서 크기를 확인하여 정확히 어떤 치수를 사용하고 있는지 확인하는 것입니다. http://responsejs.com/labs/dimensions/은 뷰포트의 너비와 높이를 캡처하는 다양한 방법을 보여주는 훌륭한 사이트입니다.

는 또한

희망이있는 모든

Answer 2

에 도움 '... 화면'보다는 '.... 모든과'사용하는 것이이 사람 : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

"뷰포트"메타 태그가 내 새로운 가장 친한 친구 인 것처럼 보입니다. 내 전화와 사무실 동료의 iPhone에서 문제가 해결되었습니다.

제안 해 주셔서 감사합니다.

Answer 3

넣어 당신의 HTML 헤드에서이 메타 태그 :

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

많은 현대 스마트 폰은 모두를 던지는 자신의 뷰포트를 확장하려고합니다. 이 메타 태그는이 비율 조정을 방지합니다.