2011-02-16 12 views
2

텍스트 및 이미지를 표시하고 여러 화면을 처리하는 비 복잡한 방법을 찾는 간단한 웹 페이지가 있습니다.다른 화면 크기의 Android CSS

나는 the docs을 훑어 보았고 지금 당장 볼 수있는 유일한 방법은 3 개의 별도 CSS 파일 (하나는 중간, 하나는 고해상도)을 만들어야한다는 것입니다. 불행히도 이들 각각은 각 요소/이미지의 글꼴 크기와 크기가 달라야합니다.

모든 hdpi 요소가 정상 크기의 정확히 1.5x 크기 여야한다고 생각하면 다소 낭비가되는 것 같습니다. Android가 mdpi 대신 hdpi 버전의 이미지를 사용하면서 자동으로 크기를 조정할 수있는 방법이 없습니까?

여기에 뭔가가 있습니까?

답변

2

귀하의 스타일 시트에미디어 쿼리를 사용해 볼 수 있습니다.

기본적으로 뷰포트가 X 크기보다 작 으면이 스타일을 시작하거나 변경하거나 뷰포트가 Y보다 큰 경우이 스타일을 구현 (또는 업데이트)한다고 말합니다. 원하는만큼 많은 가능성을 가질 수 있으며, 특정 폭에 도달하면 선택한 클래스 또는 ID에 변경이 구현되므로 추가 스타일이 필요하지 않습니다.

체크 아웃 Responsive Web Design

희망에이 글이 당신이 후에있는 정보의 종류입니까?

+0

우리는 이것을 요구하지 않는 다른 방향으로가는 것을 끝내었지만, 아마도 다른 경우에 도움이 될 것이므로 대답으로 표시 할 것입니다. 감사. – cottonBallPaws

2

나는 아주 똑같은 문제를 검토했다. 글쎄, 안드로이드는 자동으로 애플 리케이션 아이콘과 같은 화면 크기에 따라 Webview (이미지, 글꼴 크기 등)의 내용을 자동으로 조정하지 않는 것 같습니다.

그러나 아이콘과 관련하여 실제로는 자동 조정되지 않습니다. ldpi, mdpi 및 hdpi 해상도를 수용하기 위해서는 아이콘을 세 가지 크기로 제공해야합니다.

그래서 우리는 세 가지 CSS 파일을 제공해야합니다. 당신은 당신이 이전에 언급 한 문서를 읽을 경우에, 실제로,이 같은 하나 개의 파일에 그 세 가지 CSS를 작성할 수 있습니다

상단 부분은 MDPI입니다
header { 
    background:url(medium-density-image.png); 
} 

@media screen and (-webkit-device-pixel-ratio: 1.5) { 
    /* CSS for high-density screens */ 
    #header { 
     background:url(high-density-image.png); 
    } 
} 

@media screen and (-webkit-device-pixel-ratio: 0.75) { 
    /* CSS for low-density screens */ 
    #header { 
     background:url(low-density-image.png); 
    } 
} 

의 hdpi에 대한 중간에 한하고, 하단 부분은 ldpi에 대한 것입니다. 따라서 세 가지 화면 해상도로 하나의 파일을 쉽게 관리 할 수 ​​있습니다.