When I enable VR mode on my iphone from portrait is make the lenses uneven.
If I start from landscape more they are even..
See pics below
UNEVEN from portrait
EVEN from Landscape mode
Related
I noticed an odd problem with iPhone6 Plus in Landscape Mode and Bootstrap3 with its media queries. Basically, there's almost enough space on the iPhone6 plus in Landscape Mode to make it act like a tablet iPad in Portrait Mode.
The iPhone6 Plus Landscape Mode has a pixel width of 736px.
The iPad Portrait Mode has a pixel width of 768px.
When trying to do grid styling with Bootstrap3, the col-sm-* works only for 750px and up. So, you can capture the iPad Portrait Mode and make it work well with that class. However, it doesn't work well with iPhone6 Plus Landscape Mode.
How can I override Bootstrap 3 so that col-sm-* CSS class works for 736px and up, fixing both container and container-fluid width and column width? The end goal would be to allow iPhone6 Plus Landscape Mode to act more like the iPad Portrait Mode.
Unless someone can come up with a better answer, what I'm having to do is create a media query just for the iPhone6 Plus in Landscape Mode, and fix issues.
/* iPhone6 Plus Landscape Mode Fixes */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
/* FIXES GO HERE */
}
A more desirable answer would be to adjust .container, .container-fluid, and .col-sm-*, perhaps.
I'd like to try to work out a method of adaptive webpage design to coexist with both mobile and desktop browsers.
At first it looked like using Media Queries in CSS was what I needed, so I went with that, but it looks like Google Chrome is messing up what I wanted to do.
Compared to most browsers, for the most part only mobile browsers respond to the orientation media query, which seemed to be a good way to target a mobile browser, no matter the screen size. However, for some reason, Google Chrome not only responds to this, but will actually select Landscape and Portrait depending on the dimensions of the viewport (the window itself) and has nothing to do with the position of the screen itself.
This brought me to another potential idea. I noticed that on my mobile devices, device-width and device-height will swap positions depending on landscape and portrait modes, while Google Chrome on a desktop always reports the monitor's proper dimensions, even when Chrome thinks the window size qualifies as Portrait mode.
What I'm hoping to do is figure out a way to make a media query that determines if the device-width is greater than device-height. This should allow me to determine the true orientation of the screen, regardless of viewport size and Chrome's orientation value.
My eventual goal is to be able to design a page with a specifically mobile-friendly layout for any device that reports Orientation: Portrait AND the Device-Width is less than Device-Height, which should only ever happen on a true mobile device in portrait mode (or the rare sideways PC monitor, which I don't mind accidently targetting), while serving a landscape/desktop friendly layout to any device with a screen that is wider than it is tall.
I am adamantly avoiding using any form of Javascript, useragent query, or server-side scripting to accomplish this. Media Queries seem to be the fastest and least costly (processing wise) method to have a page that actively shapes itself to the current device and will also shift its position in real-time as the mobile device rotates between orientations.
My ultimate question for this post is: Can I specify some form of expression in a media query in CSS that will simply compare the Device-Width and Device-Height and display one style when the width is greater than height, and vice versa?
Something like:
#media screen and (device-width > device-height) //true landscape mode
#media screen not (device-width > device-height) //true portrait mode or square screen
After some tweaking and testing, I came up with the following combination of media queries that seem to do what I'm trying to accomplish.
#media only screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1)
//This targets any screen that is in true Landscape orientation, including desktop browsers. This should also target square screens where the browser reports landscape orientation.
#media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//This targets strictly desktop browsers that have a window resized into what the browser considers "portrait" mode. This works in Chrome, Firefox, and MS Edge (haven't tested others). More specifically, this targets any browser that reports portrait mode, but where the screen is actually in landscape position. This may also target square screens where the browser reports portrait orientation.
#media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//This strictly targets devices that are actually in portrait orientation, mainly mobile devices (although it may target desktops with rotated monitors)
This may also target square screens reported to be in portrait mode, so you may need an additional query that targets exactly square screens.
I'm happy that you got the way to do what you where looking for, but I think readers should take in account a couple of things:
First, as you said, Monitors can also rotate, in fact is very common in offices to see that kind of monitors.
Second, in mobile you can also have a Landscape viewport in Portrait orientation or viceversa, as you can split the screen in two.
Third, devices such as the Pixel 2XL and iPhone X have a proportion of 18:9 and 19.5:9 respectively, which means that half screen will return Landscape.
Finally, what really matters is the viewport orientation because is what determines the content area, whether is a desktop or a mobile screen. If you resize your desktop window you should also thing about doing some responsive to optimise your available space.
As bonus, in iPhone width referes to viewport while device-width refers to the screen width, which, unlike Android, is always the larger side of the screen.
I'd love to have an easy answer to your question, but there is not. Doing responsive is not easy. Maybe this article (EN) can help you. It gives some clues to split between Desktop vs Laptop, Laptop vs Tablet and Tablet vs Mobile.
I have set a background for a webpage and i have done it responsive by giving media queries.
I have made the size of background 175% for ipad on portrait mode, when I am checking the result on ipadpeek.com (please check the website here once to see the original portrait mode background and landscape mode background )
For the resolutions of ipad, its looking fine on landscape mode and portrait modes, but on ipad itself on portrait mode, the background is not coming correct. It becomes small on portrait mode. Here are the screen.
This is the url to my site.
Here is the screenshot of ipads portrait mode.
Please Help me if anyone can !
Many Thanks in Advance
Rather then using Background-size: 100% 100%
Try using background: cover; This should allow the image to be aligned like it is on the webpage.
I am not able to rotate my view PortraitUpsideDown in my iPhone 5. I have used supportedInterfaceOrientations(UIInterfaceOrientationMaskAll) and shouldAutorotate {return YES;} and also checked PortraitUpsideDown orientation in the Project's Summary.
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
{
self.ViewController = [[ViewController alloc]initWithNibName:#"ViewController" bundle:nil];
self.navigationController=[[UINavigationController alloc] initWithRootViewController:ViewController];
}
I have used [self.window setRootViewController: self.navigationController]. It is working all good for iPhone 4s but not in iPhone 5.
While this won't satisfy your question, I must add this:
You should never let an iPhone or iPod Touch rotate to "upside down", ever.
Only iPads should be allowed to do that.
Why?
Because these devices do not offer a lock button for landscape but only for portrait.
Now imagine you lay on your bed or couch on your side and want to use an iOS app that supports both portrait and landscape modes. Imagine you want to use this app in landscape mode. But as soon as you lay on the side, the iPhone is held upright, and it'll rotate to Portrait or UpsideDownPortrait. You cannot lock it to landscape unless the app prevents the Upsidedown mode!
Therefore, do let only iPads go into UIInterfaceOrientationPortraitUpsideDown, but not other devices, to let your users lock their iPhones into landscape mode when laying on their side.
Hi I'm trying to write a media query that will affect all phones but not iPads.
I'm having a hard time doing so because apparently android devices change their device-width as they change orientation. Portrait to Landscape means the width becomes the height and vice versa. Apple devices report their device width as the same value regardless of orientation. The fact that there are android phones with higher resolution than iPads further complicates the issue.
If there is an android phone with a device height of 1280px and iPads have a device height of 1024px, how can I write a media query that will affect all Android phones but not iPads?
You could use this to differentiate an Android device in landscape from an iPad in landscape, but I'm not sure on portrait:
<style>
#media all and (min-device-aspect-ratio:1/1) and (orientation:landscape) {
/*because an iPad doesn't change it's width, it's device aspect ratio will not be greater than 1/1 */
body {background-color:#00FF00;}
}
</style>