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 ;)
Related
I might be completely off the mark, but here goes:
I tried testing my website with various modern phones and tablets... and the result is that my media queries never come into effect because these phone/tablet resolutions are too high.
Things like #media (max-width: 767px) { }, which I want to display for phones, never come into effect because of this resolution problem. Any ideas on how to solve this? This can't be an uncommon problem so I feel like I'm overlooking something.
Configured correctly, "retina" screens take the increased resolution into account when rendering web pages. I'd take a look at Bootstrap, purely as an example of how to setup your page to be fully responsive.
You'll find once you have this setup, it will work regardless of the actual physical resolution of the device. For example, the first iPhone to have a retina screen (iPhone 4, perhaps?) had a "width" of 320px, regardless of the fact that it's resolution was far higher than that.
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.
I have a media query -->#media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only #media screen and (max-width: 768px).. how do I go about it?
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.
I'm designing a website using media queries and have everything looking good on desktop and my iPad...but my phone is a different story. The pixel dimensions are 1024x768 because it is a newer smart phone, so it is trying to display it like my tablet. How can I use a media query to specify that my phone at 1024x768 should display differently than my iPad? Thanks for any help.
Here's what I've been working with to start:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
Initial thoughts
Some additional information on the exact layout problem on your phone would be helpful. Also, do make sure you are using the proper <meta> tag (as #Lokase suggested). A good run down can be found here.
Two possible solutions
Usemin-height and max-height in combination with the
width media queries you are already using to attempt to target
your phone.
If that is not an option, you can use javascript to target your
phone by attempting to detect the user agent, but this can be hit or
miss.
A word of Warning
With all that said trying to design for specific viewports will lead to endless frustration. A more time intensive you may need to step back and rethink your layout, and how you are using media queries. This can be a pain to implement, but you will thank yourself in the long run. Just consider the number of high resolution android phones in the market now, and how many are going to be shipping soon.
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.