Detect Mobile Safari full-screen mode using media queries - ios

iOS6 introduced a new full-screen mode for Mobile Safari. It is only available in landscape orientation and hides the browsers top and button bar, as well as the devices status bar.
How is it possible to detect the new mode using media queries? I tried using the width media query, but couldn't get it to work.
I was able to differentiate them using JS document.documentElement.clientHeight, which returns 208 on default and 320 on full-screen mode.
Btw: I'm not talking about starting the app from the home screen, which is a different kind of full-screen mode.


So, height is 320px, orientation is landscape. Here's the media query:
#media only screen and (height : 320px) and (orientation : landscape) {
/* rules here */
}

Related

Android TV portrait WebView

I am writing an application that runs on Android TV 5.1 or newer that uses the WebView as the display rendering engine. I am able to set the desired display orientation, but the WebView rotates back to landscape within the display and maintains the correct aspect ratio.
I have tried using CSS to perform a transform but the aspect ratio is not correct. I have not found a method to force the WebView to rotate and fit the parent window.
Is there any method to set the orientation and size of the WebView itself? I see the same behavior on multiple devices.

This behavior is device specific. Some of the devices I have tested rotate as expected, another device rotates the display, but the WebView rotates back into landscape. The remaining devices I have tested do not rotate at all.
I will make this will be a known limitation of running this application on Android TV devices.

Phonegap (iOS) keyboard breaks viewport on orientation change

Later edit: issue was jquery mobile.
I have an app built with phonegap and jQuery mobile. Everything works perfect until input is focused and keyboard appears. After this, if I'll switch orientation, viewport is broken.
Example :
Home screen (portrait)
Home screen, changed orientation
Home screen (portrait) with input focused
Home screen (landscape) after input was focused
As you can see in #4, viewport is broken.
I'm using fixed viewport size (width=640, user-scalable=no). Also tried to use scale programmatically on orientation change, change viewport on orientation change, but it didn't work.
Any suggestions?
Thanks!

Page width blocked at 769px on iPad (landscape orientation)

I don't understand why the width of my test web page is blocked at 769px in landscape orientation (instead of being 1024px) when I view it on my iPad, since nothing in my markup or CSS defines such limit.
Any suggestion is welcome.

Em-Based CSS Media Query Showing Smaller Resolution Than Expected On Ios Mobile Safari

I'm working on a new website using em-based CSS media queries. In the past, I've always used px-based media queries. I wanted to try something new. I have things set up in such a fashion that most phones (in portrait), most phones (in landscape) and tablets (in portrait), and most tablets (in landscape) will see differences in the layout.
Everything works, as expected, on desktop browsers (IE, Firefox, Chrome), Android (Android browser, Chrome), and Windows Phone (IE). iOS (Safari) displays the portrait version, as expected, but switching to landscape keeps the portrait layout. This has been tested on an iPhone 5 (iOS7), iPad 2 (iOS7), and iPhone 4s (iOS6) and they are all consistently inconsistent.
HTML:
<meta name="viewport" content="width=device-width">
CSS:
/* portrait phone (< 480px) */
#media screen and (max-width:29.9999em) {
}
/* landscape phone and portrait tablet (>= 480px < 960px) */
#media screen and (min-width:30em) and (max-width:59.9999em) {
}
/* landscape tablet and normal monitor (>= 960px < 1440px) */
#media screen and (min-width:60em) and (max-width:89.9999em) {
}
/* bigger monitor (>= 1440px) */
#media screen and (min-width:90em) {
}
/* big monitor (>= 1920px) */
#media screen and (min-width:120em) {
}
So, the iPhone (landscape) should fall between (min-width:30em) and (max-width:59.9999em) and the iPad (landscape) should fall between (min-width:60em) and (max-width:89.9999em). Unfortunately, they both fall one query narrower.
While searching through stackoverflow, I found this post that says the default font size in mobile Safari is 12px (not 16px, as normal). I had not seen that on any other sites, but the calculations seemed to make sense (further calculating doesn't seem to put them in different media query groups, though).
In response, to that post, I set a base font-size of 16px.
CSS:
html { font-size:16px; }
My thought was that it would over-ride the browser's default setting and match with every other browser that was being tested. Unfortunately, mobile Safari is still using the portrait layout when in landscape.
I had read a few pages that mentioned needing to refresh with Safari (not sure if it was mobile or desktop), so I even tried that.
Does anyone have a reason why this is happening? As mentioned, I've created other sites using px-based media queries and they function as expected.

In media queries, the em is based on the browser's default font-size (note that the user can modify this). There's nothing you can do to alter this.
Related:
http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

This was the fix that ended up working...
CSS:
body {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}

iPad Landscape orientation autosizing

I have my app supporting both portrait and landscape modes. But once I switch it from portarait to landscape, it does not autosize. The page is displayed just in half the total display frame available. Can some one suggest me the code I need to put in?

Resources