Problem:
iOS8/Safari doesn't seem to understand / support media queries containing viewport units like: (max-height: 175vw). It works just fine on iOS9 devices though. I tried using max-aspect-ratio and max-device-aspect-ratio but they're also being ignored.
Does anyone have any idea why this isn't working or know of any other way of creating media queries that are not tied to proportions/aspect ratios instead of specific screen sizes?
Explanation (or, why do I even need this?)
We're working on an ios/android app using Cordova and instead of having to worry about breakpoints and all different screen sizes, we decided to use viewport units quite extensively and only worry about a few aspect ratio / screen size proportions.
So, right now, the styles we have work fine on devices like iPhone 5, 6, 6+, most Android devices (and any other device that share these proportions or anything in between).
Now, devices like iPhone4 and iPads have considerably different proportions; they're more 'square' per say. To account for that, we just need a media query for 7/4 and below proportions and (max-height: 175vw) works just fine on iOS9 and Android devices (we're using Crosswalk for Android, so consider Chrome too), but doesn't seem to work on iOS8/Safari.
Update:
Just had an idea. For now I'll use (max-height: 175vw) and that should fix all Android devices (at least 4.4 that we're supporting) and iOS9 devices. After that, I may just need an extra media query for iPhone4 and/or iPad.
It seems like aspect-ratio is supported for media queries by now, as I have just tested in the current versions of Firefox, Chrome and Safari (see demo).
#media screen and (max-aspect-ratio: 1/1) {
.landscape { display: none; }
}
Please take note that you have to specify the ratio in form of a division (e.g. 16/9). Floating point values (e.g. 1.7777) will not supported.
Of course, in a media query, min-aspect-ratio is functionally aequivalent to max-width with the corresponding value in viewport units (vh) – but better supported by browsers.
Until viewport units are really supported, you can use cordova-anyscreen to accomplish what you want. https://github.com/biodiv/cordova-anyscreen .
You will also be able to support Android down to 4.0, maybe even 2.3 (which might not be important) and iOS 6+.
Proportional Layout is done in reference to a screen with the dimensions 1080*1920. So if you want 50% width you would use 540px. The display is measured by the script and it recalculates the 540px matching the screen.
Related
I'm trying to build a responsive website for ipad and mobile as well.
This is the Link if you want to check it out.
Anyway, when I use the devTools in chrome for checking out the layouts on the Galaxy S5, then the landscape view is all good. When I check it on the actual device, then the height seems to be a bit less, and some parts of the website are actually cut out. Probably due to some parts of the device not being accounted for in the height.
Screenshot from the chrome dev tools, using the width and height of the S4 mini viewport when in landscape mode:
Screenshot from the actual device in landscape mode
So the questions are:
How do I actually use the devTools in Chrome to get a precise
representation?
Do I need to actually account for browser size in the #media (min-width: whatever px) query?
Is my question wrong from another perspective I haven't considered? Am I missing something?
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.
This is not a duplicate question, because I don't want to target the iPhone 6 specifically, I want to target ALL smart phones and mini tablets, icluding the iPhone 6, 7, 8, etc and Android, etc
I'm trying to find out a useful CSS media query to detect smart phones.
So, I was thinking, the following would fit perfectly since the screen resolution in px on an iPhone 6 is almost the same as the one from a desktop screen with a pixel ratio of 1:
#media (max-device-width:16cm){ /* I need the PHYSICAL device width */
...
}
However, I'm not sure if this translates interally ALWAYS to 529.2px (1cm == 37.8px) or does it really respect the actual device width in cm of the hardware?
Because, in my opinion, what really matters is the physical space available, and I don't care at all how many pixels there are to represent this area in order to decide how much content I want to show.
You can't use centimeters because some devices have their pixels further apart.
However what you could do is check the device's pixel density. Here is how you can use a media query with the pixel density.
#media all and (min-resolution: 150dpi)
{
body
{
// do something
}
}
The second way would involve some JavaScript as described here.
Media query in pixels is all you need. Screen resolution and viewport width are 2 different things.
You can check http://viewportsizes.com/?filter=iphone for view port width. The link has the iphone filter but you can remove it to look at other phones.
I usually use 768px as a cut of point. Anything above or equal to 768 I use a desktop view and anything below I use a mobile layout. It's not device-dependent, you are simply checking the view port width or browser width to determine what should be shown.
http://www.lexus.ca uses this cut off point, I am just linking this to give you an example
I'm having a problem with my media queries where I want to target phones, tablets or computers. the problem is that today some phones and tablets have a high screen resolution.
I can´t seem to find a proper combination to achieve this. Could you help me and post the queries that you guys use for your websites? I've been working on these for days, to no avail.
Should I use some JavaScript library for this?
UPDATE:
I found a very good jquery library that seems to be very reliable with today's devices. And even though it is not being developed anymore, I found that it successfully detected all the devices tested, regular phones and tablets, high ppi phones and tablets, and desktop or laptop computers.
Try it out, and see if it works for you too
Categorizr
There is no way to make everyone happy. For our upcoming responsive website we used a few breakpoints
768px
1024px
1280px
1920px - is our biggest, we cut off at this point
We have our server output classes on the body to detect classes (can be done with modernizr I think, never used it), for example, .iphone, android, .mobile, .phone, .tablet
So if you are using an iphone we would get
.iphone and .phone on the body tag
For some pages we also defined breakpoints at 320px and 480px
We use jquery for everything, just a warning, jquery runs fairly slow on Samsung tablets, man do we hate that device
Example of media query (we use LESS)
// normal styles
#media only screen and (max-width: #maxTabletWidth) {
// less than 1024px styles, yes I know 1280px is also tablet
}
#media only screen and (max-width: #maxPhoneWidth) {
// less than 768px styles
}
Good luck
Having built quite a few responsive websites, I find that instead of specifying 'x' width for a desktop monitor, 'y' width for a tablet, and 'z' width for a mobile; it's better to use breakpoints to ensure your site works across all browser sizes.
That said, a good site to look at if you're interested in various screen sizes is screensiz.es, where you can see popularity stats as well as their physical pixel widths.
Being device agnostic means that you won't have to readapt designs, and builds when Apple, or Samsung release their super thin, or super chunky devices.
A final suggestion to aid the functionality on the variety of devices would be to employ something like Modernizr to detect touch events.
Hope that helps.
I wonder if you are using the right tool for the job. Responsive design lets you stop trying to target specific devices or guess what the specifics of the next iPad / smartphone will be.
Set the break points to manage the layout of your design at different viewports and you are 90% done ;)
Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?
I've been struggling with this for a few days, but a good way to check for handheld devices is the max-device-width. Desktop pc's don't send this to the browser, but most (if not all) handhelds do use this.
In my case I wanted to show a compressed version of the site on all devices (including desktop) when below a certain width, for which I used
#media all and (max-width: 640px)
But a certain overlay popup that used position: fixed had to be changed on handhelds only (because the css property works in all desktop browsers but not on all handhelds). So for that I used an additional rule:
#media all and (max-device-width: 640px)
In which I target all handhelds below 640 but not desktop browsers. Incidentally, this also doesn't target iPads (which is how I wanted it) because it has a higher device width than 640px.
If you just want to target all devices just pick a low min width (1px) so that it doesn't exclude any device regardless of width.
In the CSS3 spec, #media handeld is mentioned but it has perhaps no browser support.
So, no.
However, you might find this site useful, it explains other some media query techniques for mobile.
I don't think you'll have too much luck with a pure css approach. You'll want to do something along the lines of the modernizer.js approach and us JS to detect device and append a class name to body based on that.
What is the best way to detect a mobile device in jQuery?
Then include that class in your media queries to special case mobile devices of varying sizes.