I have seen many different media queries for detecting if the user is using a phone or a desktop. However for many devices now the gap between resolution, ratios and many other things overlaps between high end devices (such as the S8), laptops and low end phones.
My question is, if I want a style sheet for phones, which include all phones and one for desktops, is there a media query to use that is best or should I take a different approach maybe with JavaScript
The landscape and portrait approach works until the soft key board is used and the phone re-considers it as landscape
Examples below no longer work on all devices as they have become out dated.
#media only screen and (orientation : portrait)
#media only screen and (max-device-width: 480px)
#media only screen and (min-aspect-ratio: 13/9)
Not sure if this helps but I usually stick to the breakpoints defined by Bootstrap V4 even if it's not a Bootstrap project. I find that it's a nice range to develop in and more times than not I only have specific styles in the larger breakpoints (as I'm developing for mobile first).
If you only want to use two breakpoints I'd probably suggest < 768px and > 768px but you might have people with varying opinions on that. You'll definitely have edge cases with certain devices.
Related
I’m starting on a Web App and targeting mobiles and tablets.
My app will consist of a full page display, with no ability to scroll (e.g. all content will need to fit full screen on these devices).
I’ll have four different views:
– Mobile Phone: Portrait
– Mobile Phone: Landscape
– Tablet: Portrait
– Tablet: Landscape
So I thought I need to identify if it’s a mobile or a tablet and get their resolution to be able to calculate the different elements’ sizes.
I also need to figure out if it’s portrait or landscape.
In addition I would like to display either phone or tablet size on a computer (centered on the screen) depending on how large size the web browser is.
Is there anybody who can help me out with some code to accomplish this? Or maybe point me to a framework/github that supports this?
Thanx.
Eirik
You can use media queries and orientation in your css
#media only screen and (min-device-width: /*min width*/) and
(max-device-width: /*max width*/) and (orientation: /*portrait or landscape*/)
{
/* your css */
}
When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.
But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android).
This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation:
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.
And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!
Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?
All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?
From the very same post you referenced in your question:
Stack Overflow– “Should I use max-device-width or max-width?”
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.
I don't want landscape view to appear when a phone is rotated to landscape, only a tablet-sized device. I'm using em's for measurement but it's hard to pick a good cutoff. The Nexus 4 (for example) is 61.5em wide in landscape (an iPad is 1024 or 64 em) which is very wide but landscape view looks poor on that phone. Is there a good solution?
You may need to setup device specifics for each device resolution. I'm not aware of any specifics that determine if you are looking at one specific device. Some phones are much easier to detect (like iPhone 6+) since they have specific abnormal resolutions. I know the #media handheld is ignored on many devices so that doesn't help much but give it a shot.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can add an orientation for a deeper test as well. Something like
#media (min-width: 1024px) and (orientation: landscape)
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query :
#media only screen and (max-device-width: 480px)
As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all kind of devices (Android, Windows Phone, etc).
What would be a good resolution that would fit most of smartphone of these days? Or do I need a more complex media query?
Recently I started to work with Responsive Web Design and Media Queries, I didn't find a unique "magic" query, but after reading a lot of articles and a couple of books, I've adopted the Mobile First way to develop web pages, and I'm using some common Media Queries, here the breakpoints:
320 px Mobile portrait
480 px Mobile landscape
600 px Small tablet
768 px Tablet portrait
1024 px Tablet landscape/Netbook
1280 px & greater — Desktop
(Taken from http://fluidbaselinegrid.com/)
Hope it helps
Updated: Mars 2016
Projects are all different, so it's hard to set a global rule that will fit them all. If you're looking for one, here's an example that someone smarter than me came up with and that I've used before:
xsmall: (max-width: 479px),
small: (max-width: 599px),
medium: (max-width: 767px),
large: (max-width: 1024px),
largeOnly: (min-width: 768px) and (max-width: 1024px),
xxl: (min-width: 1200px),
tall: (min-height: 780px),
Note the lack of references to devices, screen sizes or orientation on their names. The size of a 'tablet portrait' shouldn't really matter to us as we should try to make things responsive and look good on any screen size, not simply adaptive to a few screen sizes.
Yes, it's important to know the most common screen sizes and avoid crazy media queries, but in the end, your design may start to beg for adjustments at 530px instead of 480px or something like that. So why not?
Now, on my personal preferences: I keep media queries in mind all the time, but at first I tend to ignore device sizes almost completely. I also prefer the desktop-first approach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).
Original Answer
Some people tend to ignore device sizes completely. They say you should check where your layout starts to break and create media queries only when necessary. Others will check for different device sizes, as you're doing now. But then you'll have a media query for 320px, another for 480px, and so on... You may go crazy with that, and maybe it's not even necessary depending on your layout!
So, for now I'm trying to do both. I tend to ignore device sizes at first and will create some media queries only when necessary (when layout breaks), until it looks good for sizes like 960px and bigger, and also for smaller screen sizes, like 320px (the smallest device size I care about).
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...