I am doing responsive layout with media queries and works just fine.
When the ipad change orientation though it doesn't "refresh" the layout
accordingly to the media queries.
Related
Hello stackoverflow community,
I have just added the constraints to my iPad app and would now like that if you hold the iPad across that you can scroll the page, because not everything fits on a transverse page. If the Ipad is upright you should not be able to scroll (there everything fits).
How can I make that happen?
Edit:
I would like to be able to use landscape mode on my app, which I originally designed to be portrait only. For this I have already inserted all constraints so that the size etc. fits. Now, however, the page is so full that it no longer fits on the complete display in landscape mode. Now I would like to be able to scroll down and thus the complete page is on the display. How it looks at the moment in portrait and landscape format I have loaded into the attachment (do not wonder the app is in German).
Landscape
Portrait
add your views into UIScrollView and set its contentsize, you can thencontrol what should be visible or scrollable for both portrait and landscape
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.
I just made an ios app through cordova, iphone app looks fine because I am using always portrait mode for iphones but for ipads I am using always landscape mode with locked rotation. The problem is when I ma build an app and run it on my ipad the landscape works fine the rotation is locked but the main issue is that I have set 100% height on body, and somehow its not working on iPad landscape. Looks like that 100% doesnt detect landscape mode and automatically was set 1024px for height because if I am set 768px height for body in inspect then the whole app looks fine as should.
Any ideas what can be the issue there ?
Don't set width and height if you set the scale
From apple doc
You do not need to set every viewport property. If only a subset of
the properties are set, then Safari on iOS infers the other values.
For example, if you set the scale to 1.0, Safari assumes the width is
device-width in portrait and device-height in landscape orientation.
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 */
}
I'm trying to make a spec on the ipad for an image gallery that has a 3x3 portrait layout but changes to a 3x2 layout on landscape.
I'm trying to get the landscape or portrait grid on application load and then change also on orientation change but every time I do change my orientation the thumbnails flicker and the grid is all out of wack.
http://pastebin.com/sLppSpS9
I'm thinking 'clear out or reset' the view, is there way to do that?
I've done similar with Windows, rather than views - my approach was to .close() then .open() again, suited my needs, might be worth investigating with yours