Comments on: Determine iPhone orientation using CSS http://www.thecssninja.com/css/iphone-orientation-css All things CSS, Javascript & xhtml Tue, 07 Sep 2010 21:49:48 +0000 hourly 1 http://wordpress.org/?v=abc By: The Css Ninja http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1665 The Css Ninja Tue, 06 Jul 2010 01:14:50 +0000 http://www.thecssninja.com/?p=321#comment-1665 @Iraê - I agree there should be an option to do it. The native apps can, why not Safari? Having said that we should embrace orientation changes and utilise it to our advantage. With the latest software for iPad and iPhone CSS orientation media queries (along with many other browsers) are supported so instead of using max/min-width we can use orientation:portrait/landscape in our CSS. I did a guest post about that subject on another blog for <a href="http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/" rel="nofollow">CSS3 media queries</a>. @Iraê – I agree there should be an option to do it. The native apps can, why not Safari? Having said that we should embrace orientation changes and utilise it to our advantage.

With the latest software for iPad and iPhone CSS orientation media queries (along with many other browsers) are supported so instead of using max/min-width we can use orientation:portrait/landscape in our CSS. I did a guest post about that subject on another blog for CSS3 media queries.

]]> By: Iraê http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1664 Iraê Mon, 05 Jul 2010 15:57:34 +0000 http://www.thecssninja.com/?p=321#comment-1664 @John M, CSS Ninja IMHO being unable to lock the mobile safari's orientation is a flaw to apple's or webkit mobile. They advocate HTML5 apps as a powerfull plataform, and for most cases it is. But for now we have to support both orientations, and we have no good way to make it really cross device. It's a mess to detect iPhone, Android, and iPad orientations, widths and heights, and even the new pixel ratio in iPhone 4 - and make your webapp fit in all combinations. In fact, I've not had the time to research and test all of these. It would be nice to have an article about that =) @John M, CSS Ninja

IMHO being unable to lock the mobile safari’s orientation is a flaw to apple’s or webkit mobile. They advocate HTML5 apps as a powerfull plataform, and for most cases it is. But for now we have to support both orientations, and we have no good way to make it really cross device.

It’s a mess to detect iPhone, Android, and iPad orientations, widths and heights, and even the new pixel ratio in iPhone 4 – and make your webapp fit in all combinations. In fact, I’ve not had the time to research and test all of these. It would be nice to have an article about that =)

]]> By: The Css Ninja http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1644 The Css Ninja Mon, 05 Jul 2010 02:49:39 +0000 http://www.thecssninja.com/?p=321#comment-1644 @Jon M - No you can't lock the orientation in mobile Safari, the best you can do is display a message saying you need to be in portrait when the user is in landscape. But that would be a very annoying solution! You should educate your client on why it's bad and that it's actually not possible. @Jon M – No you can’t lock the orientation in mobile Safari, the best you can do is display a message saying you need to be in portrait when the user is in landscape. But that would be a very annoying solution! You should educate your client on why it’s bad and that it’s actually not possible.

]]> By: jordan http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1629 jordan Fri, 25 Jun 2010 11:08:03 +0000 http://www.thecssninja.com/?p=321#comment-1629 does any one know how 2 get on n the way of the ninja 2??????????? does any one know how 2 get on n the way of the ninja 2???????????

]]> By: Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1626 Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine Thu, 24 Jun 2010 09:27:21 +0000 http://www.thecssninja.com/?p=321#comment-1626 [...] [...] [...] [...]

]]> By: Frederick Weiss http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1606 Frederick Weiss Fri, 04 Jun 2010 18:23:56 +0000 http://www.thecssninja.com/?p=321#comment-1606 This is just what I was looking for, THANK YOU! min-width: 321px max-width: 320px So perfect. This is just what I was looking for, THANK YOU!
min-width: 321px
max-width: 320px

So perfect.

]]> By: Jon Milani http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1598 Jon Milani Tue, 25 May 2010 07:00:06 +0000 http://www.thecssninja.com/?p=321#comment-1598 Is there a way to lock Mobile Safari's orientation to either portrait or landscape (via javascript or otherwise)? In other words, I want the web page to remain in portrait mode regardless of the orientation of the device. The reason I ask is because I'm designing an iPhone specific "hello" page for a client, and they want the page to lock to portrait (aka 320px by 480px) regardless of the actual orientation of the iPhone. Any help would be very much appreciated! Is there a way to lock Mobile Safari’s orientation to either portrait or landscape (via javascript or otherwise)? In other words, I want the web page to remain in portrait mode regardless of the orientation of the device.

The reason I ask is because I’m designing an iPhone specific “hello” page for a client, and they want the page to lock to portrait (aka 320px by 480px) regardless of the actual orientation of the iPhone.

Any help would be very much appreciated!

]]> By: UT Web Developers | Blog | Usability & CSS3 http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1579 UT Web Developers | Blog | Usability & CSS3 Tue, 11 May 2010 16:58:29 +0000 http://www.thecssninja.com/?p=321#comment-1579 [...] Determine iPhone orientation using CSS (The CSS Ninja) [...] [...] Determine iPhone orientation using CSS (The CSS Ninja) [...]

]]> By: Modern CSS Layouts, Part 2: The Essential Techniques | Creative Man Studio http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1576 Modern CSS Layouts, Part 2: The Essential Techniques | Creative Man Studio Fri, 07 May 2010 18:08:09 +0000 http://www.thecssninja.com/?p=321#comment-1576 [...] [...] [...] [...]

]]> By: Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine http://www.thecssninja.com/css/iphone-orientation-css/comment-page-1#comment-1570 Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine Thu, 06 May 2010 13:07:25 +0000 http://www.thecssninja.com/?p=321#comment-1570 [...] [...] [...] [...]

]]>