2012-04-18 5 views
2

개발중인 CSS3 및 SVG 그래픽을 사용하는 HTML5 페이지가 있습니다. 나는 장치 픽셀 비율이 1.5 또는 2 일 때 미디어 쿼리를 사용하여 SVG 그래픽을 확대 해 보았습니다. 정상적으로 작동합니다. 이제 Motorolla Xoom과 같은 소형 장치에서 내 페이지를 봅니다. 보고 된 비율은 1입니다. 즉, Xoom은 일반 모니터와 비교하여 모든 것을 매우 작게 표시합니다. 가장 성가신 부분은 가로 모드에서 크게 보이지만 세로 모드에서는 전체 페이지가 동일한 너비에 맞게 크기가 조정됩니다. 비율 번호는이 시점에서 변경되지 않습니다.CSS3를 사용하여 기기 실제 크기 가져 오기

'width : 3in;'과 같은 것을 사용해 보았습니다. 그러나 다시 말하지만, 그것은 경관의 크기 만 맞았습니다.

궁극적으로 디바이스 크기 대 픽셀 크기의 비율을 사용하고 모든 것을이 방식으로 조정하고 싶습니다. 이것이 가능한가?

+0

"너비 : 3in; '이란 무엇을 의미합니까? ... 경관의 크기 만 맞았습니까? " 가로로 3 인치 너비 였지만 세로로 3 인치 너비가 아닌가? 전체 너비를 채우기를 원한다면 왜 단순히 백분율을 사용하지 않는 것입니까? – robertc

+0

1900x1600 화면이 iPhone보다 물리적으로 크기 때문에 백분율을 사용하지 않습니다. 단순히 SVG 그래픽을 읽을 수 있기를 바랍니다. 그들은 차트와 게이지 등입니다. 화면을 가로 지르면 아이폰 초상화에 1을, 가로로 2를 원합니다. 바탕 화면의 1024x768 화면에서 3을 원합니다. 큰 화면에서 5 또는 6 일 수도 있습니다. 내 문제는 픽셀 수를 도울 수 없다는 것입니다. 크기를 '3in'으로 지정하면 Android 태블릿에서 가로로 세 개의 차트가 표시됩니다. 그들은 좋아 보인다. 제가 초상화로 넘길 때, 저는 여전히 3 개의 차트를 얻었고 너무 작습니다. – Paul

+0

[media queries] (http://www.w3.org/TR/css3-mediaqueries/)를 사용하지 않습니까? – robertc

답변

-1

제 문제는 방향을 변경했을 때 그래픽이 다시 렌더링되지 않는다는 것입니다. 새로 고침을 다시 누르면 예상대로 모든 것이 다가오고 있습니다. 이것은 키보드와 의자 사이의 어딘가에 존재했던 문제였습니다. 미디어 쿼리가 실제로 작동하고 있습니다. 오리엔테이션 변경시 일부 항목을 다시 렌더링하면됩니다.

관련 문제