장치 해상도에 따라 GWT 앱을 맞추는 방법

모바일 장치의 해상도 내에 "맞추기"위해 필요한이 GWT 앱이 있습니다.장치 해상도에 따라 GWT 앱을 맞추는 방법

사이드 스크롤링 (너비는 휴대 전화 화면의 너비 여야 함)이 아니라 앱에 목록 또는 결과 항목이 표시되므로 세로 스크롤이 필요합니다.

주요 위젯은 일부 복합 위젯을 수용하는 GWT VerticalPanel입니다.

아이디어가 있으십니까?

2011-08-12 xybrek

Android/iPhone의 모바일 브라우저에 대한보기 및/또는 크기 조절 속성을 설정해야합니다. Targeting Screens from Web Apps

를 대신하면 resizeHandler를 사용하여, 당신은 대신 인 RootPanel의 RootLayoutPanel에 추가해야합니다 LayoutPanels을 사용할 수

<!-- 
    constraint viewport to device width, 
    set initial zoom level to 100%, 
    disable user zoom 
--> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />

여기에 모든 뷰포트 옵션에 대해 자세히 알아보십시오. LayoutPanel의 크기가 변경되면 자동으로 크기가 조절됩니다.

출처

2011-08-12 17:17:54 ocaner

덕분에, 어떻게 든 그러나, 일 위와 아래로 스크롤 할 수있는 방법이 필요합니다.이 메타 태그를 사용하면 위와 아래로 스크롤 할 수있는 방법이 없습니다. – xybrek

목록을 [ScrollPanel] (http://google-web-toolkit.googlecode.com/svn/javadoc/latest/index.html?com/google/gwt/user/client/ui/ScrollPanel)에 배치하는 것이 좋습니다. html)가 작동해야합니다! – ocaner

해상도 독립적 인 레이아웃 디자인은 엉덩이 특히 웹 애플 리케이션과 같은 GWT와 고통이다.
정적 웹 페이지는 일반적으로 고정 레이아웃 (960 그리드) 등에 의존합니다. 그러나 웹 응용 프로그램과 같이 GWT에는 적합하지 않습니다.

최소 너비/최대 너비와 백분율 값을 사용하여 액체/유체 레이아웃을 사용할 수 있습니다.
자세한 내용은 아래를 참조
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
http://www.maxdesign.com.au/articles/liquid/

그러나 때때로, 특히 모바일 기기와는 데스크톱과 모바일에 대해 다른 사용자 인터페이스를 가지고 의미가 있습니다.
예를 들어 태블릿의 경우 왼쪽에는 탐색 패널이 있고 오른쪽에는 내용 패널이있는 것이 좋습니다. 그러나 휴대 전화에서는 탐색 패널 만 있고 콘텐츠 패널로 전환하는 항목을 클릭하면 의미가 있습니다. 전체 모바일/데스크탑 측면에 대한 이야기 IO 구글이

: 내 웹 항목의 변수 번호의 목록 컨트롤을 생성하기 때문에이 정보를
Google IO Talk이
Code Sample

출처

2011-08-22 12:43:01

장치 해상도에 따라 GWT 앱을 맞추는 방법

답변

관련 문제