반응이 빠른 디자인 엉망

Question

바로 내가 미디어 쿼리와 반응 형 디자인에 대해 모두 이해하고 체계화했다는 것을 알았을 때 일부 장치에서 이상한 행동을보기 시작했습니다.

내 의도는 모든 다른 장치/해상도를 포함 할 수있는 일련의 미디어 쿼리를 갖는 것입니다. 예를 들어 몇 가지 기사를 보았고 실용화하기 시작했지만 삼성 갤럭시 SII 모바일에서 테스트 할 때 예상대로 작동하지 않는 것 같습니다.

너비를 시작하려면 SII는 480x800의 해상도가 있다고 주장됩니다. 이 해상도가 비디오 재생 전용인지 여부는 모르겠지만 디자인을 준비 할 때 320px 너비에 맞춰 보입니다. 나는에서 페이지를 로딩 320x450 해상도를 얻을 기본 브라우저에서

• : 내가 여기와 협력하고 어떤 해상도를 확인하기 위해 자바 스크립트 screen.width 및 screen.height 속성을 사용하고

  내 결과입니다 세로 방향. 그러나이 동일한 브라우저에서 가로 방향으로 페이지를 다시로드하면 533x235 크기가됩니다. 바로 여기에서 사용되는 방향과 상관없이 동일한 높이와 너비를 가질 것으로 예상되므로 충분히 이상합니다. 또한, 480x800의 청구 된 장치 해상도와 일치하는 것은 없습니다.

• Firefox 브라우저를 사용하는 경우 480x800 너비의 화면 속성을 가로 및 세로 방향으로 모두 얻지 만 480px 너비의 이미지에 맞추려고하면 실제 크기가 320px 인 것처럼 보입니다.

실제로 이러한 실제 해상도는 320x533 인 것으로 보입니다.

누구나 이상한 행동에 대한 설명이 있습니까?

모든 해결 방법을 다룰 수있는 방법에 대해 알아보고 미디어 쿼리 집합을 얻으려면 어떤 조언이 필요합니까 ??

편집 ::::::::::::::

내가 뷰포트와 시도 :

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 

아직 성공하지 못했다. 실제로 hexblot "max-scale = 1"에 의해 주어진 링크의 기사에 따르면 aoiv 확대/축소가 안되지만 내 장치에서 (그것은 iOS 용일지도 모름). 나는 CSS의 링크를 따라 한 :

<link rel='stylesheet' type='text/css' media='only screen and (max-width : 320px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xsmall.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 321px) and (max-width : 479px)' href='".home_url()."/wp-content/themes/twentyeleven/style-small.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 481px) and (max-width : 767px)' href='".home_url()."/wp-content/themes/twentyeleven/style-medium.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 768px) and (max-width : 959px)' href='".home_url()."/wp-content/themes/twentyeleven/style-large.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 960px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xlarge.css'> 

내 장치에서 사이트를 방문 나는 (이 320 폭까지) 스타일 xsmall.css을 사용하고 확인할 수 있습니다.

솔직히 가로 세로의 경우 실제 폭은 320px (웹 검색의 경우)이고 가로 모드의 경우 533px (이상한 크기) 인 것처럼 보입니다.

단서가 있습니까?

Answer 1

관련 메타 태그를 통해 뷰포트를 설정 했습니까? 그렇지 않으면 화면이 대부분의 모바일 장치에서 자동으로 조정될 수 있습니다. Checkout http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Answer 2

분명히 이것은이 장치에서 1.5 (480은 320이되고 800은 533이 됨)이기 때문에 발생합니다. 실제 밀도를 2로 나눈 픽셀 밀도 = 2를 사용하는 일부 iOS 장치에서도 이와 비슷한 현상이 나타납니다.

이 링크의 정보는 http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml입니다. 그것이 다른 누군가에게 도움이 되었기를 바랍니다.

따라서 자바 스크립트 화면 속성을 사용하면 파이어 폭스는 장치 너비/높이를 검색하는 반면 기본 앤드 로이드 브라우저는 '변환 된'크기를 가져옵니다.

아직도 네이티브 브라우저에서 다른 해상도가 장치 방향에 어긋나는 이유가 아직도 이해가 가지 않습니다.

마지막으로 몇 가지 빠른 테스트를 수행하여 (불행히도 충분한 결론을 내릴 시간이 없음) 최대 장치 너비와 최대 너비가 모두 커버 된 크기 (320x533)로 작동하는 것 같습니다.

그래도 모든 사람이이 모든 기능을 처리하는 방법에 대한 관련 정보를 제공 할 수 있다면 모든 것이 엉망입니다 (적어도 나를 위해).