iPad CSS Layout with landscape / portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. The layout can be downloaded for free at the bottom of this article or from my iPad demo page. Here is a basic diagram of how the two orientations look:

In Landscape mode the layout is in two columns. The main content is in a wide left column and three side sections are stacked vertically in a narrow right column. When you rotate the iPad to the portrait orientation the layout changes to a single column design. In portrait mode the main content fills the full width of the screen and the three side content areas are positioned horizontally as three columns under the main content.

In both orientations there is a header at the top and a footer at the bottom. These both change in width from 1024 pixels wide in landscape, and 768 pixels wide in portrait. See my demo page for a more detailed diagram with pixel dimensions. Below are screenshots of my demo layout in the iPad emulator:

How does it work?

The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen. I do this with the following META tag:

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

Locking the layout to a 1:1 ratio will prevent the zooming-in and out that normally occurs when the iPad is rotated (normally, landscape mode is more zoomed-in because the width of the webpage is displayed across 1024 pixels, as opposed to portrait mode when there are only 768 pixels available).

Next I combine this with some CSS rules that change the layout in portrait and landscape modes. I do this by writing all my landscape styles normally then overwriting some of them with the @media rule at the bottom of the CSS file when the device is in portrait mode. Here is a cut-down version of the CSS:

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

The method above works beautifully for changing the layout for the two orientations without JavaScript. Check out my iPad layout demo or download the demo files and try it for yourself.

Demo Download (ipad-css-layout.zip - 41kb)

I hope you enjoyed this post. If you are reading this on your brand new iPad then... lucky you! :)

[javascript] hash 에서 파라미터 정보 가져오기

모바일 서비스 기획하기

좋은 디자이너, 나쁜 프로젝트매니저, 이상한 개발자

1. 복사할 셀 첫 열의 셀 선택하고 싶은 끝까지 선택하기.

  :   Ctrl + Shift + End

2. 동일한 내용을 선택된 셀에 복사하기

 : Ctrl + D

윈도우 최대절전모드 끄기

어느날 부터인가 컴퓨터가 대기모드로 들어가서 꺼진다.

아무 설정하지 않았는데.  컴퓨터 전원관리에서 변경해도 꺼진다.

그럴때, 최대절전모드 끄기 명령어 실행.

[윈도우] - [검색] : CMD 검색.

관리자 권한으로 실행해야 한다.

그리고, 명령어 창에 " powercfg -h off  " 라고 입력하면 끝!

명령어창 닫는 명령은  " exit "

* 배치파일(.bat)을 항상 관리자권한으로 실행하기

  1. 배치파일의 바로가기를 만든다.

  2. 바로가기 속성에서 "고급(D)..." 선택

  3. 관리자 권한으로 실행 을 체크한다.

  4. 시작프로그램 폴더에 바로가기를 넣어두면 부팅시 항상 실행.

.