iPad에서 Portrait & Landscape 일때 적용 CSS 예제
http://catharsis.tumblr.com/post/50165 ··· -revised

iPad Orientation CSS (Revised)

It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

Since I have a feeling I’ll be using this quite a bit in the future, I wanted to build on Cloud Four’s work and find a way to alleviate the following issues:

  1. Extra HTTP requests
  2. Not iPad-specific
  3. Lack of reusability

So, without further ado, here’s my proposed revision to the iPad orientation CSS:

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}

<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

As you can see, I’ve also changed the markup in a predictable way. An explanation of the changes and the reasoning behind them can be found below.

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/13 16:14 2011/04/13 16:14
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6083

Trackback URL : http://tcbs17.cafe24.com/tc/trackback/6083

« Previous : 1 : ... 389 : 390 : 391 : 392 : 393 : 394 : 395 : 396 : 397 : ... 6391 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Statistics Graph

Site Stats

Total hits:
175597
Today:
27
Yesterday:
96