(CSS) Refining the targeting of mobile devices
Copy link to clipboard
Copied
So I've been using this great bit of code you guys passed on to me last week to make my site more responsive to mobile.
@media screen and (max-width: 980px) {
.example { font-size: .8em }
}
Only problem is, 980px happens to be the resolution of both my smart phone AND tablet. So when I target devices via resolution only, I cannot differentiate between the two, despite the fact that one is physically 3 times the size of the other and should not be serving the same layout.
Since I want the tablet to display the exact same thing a desktop monitor would -- and simply want to target whatever is physically smaller than the average tablet (so, phones) -- how would I go about refining the code to target 'just phones'?
I'd like phones to serve a very minimalist layout -- just a single zoomed-in text column -- but that looks awful on a tablet. The tablet can comfortably handle the desktop layout, and is much better off with it (I compared both).
PS: I'm aware that 980px just happens to be my own devices' resolution, and your mileage may vary on that front... but after researching mobile resolution standards, it's still one I'm comfortable using as a cut-off point, if I'm forced to pick one.
Copy link to clipboard
Copied
I found this potential solution markup.
Based on what I'm reading there, I can target an iPhone 5S, or I can target a Google Pixel XL, but I can't target both? How would I even begin to combine them when they all have different min/max resolutions?
Is resolution really the only way to target mobile devices?
Copy link to clipboard
Copied
Have a look at CSS media queries: width versus device-width and The viewport meta tag- the key to preparing a page for mobile devices optimization
Copy link to clipboard
Copied
Long, long ago, in the before times (10 years ago) we only really had to worry about the latest crop of large 16:9 monitors after years of designing for various sized 4:3 aspect ratio displays. It was a glorious time to be alive, the sun shone, the birds sang and the flowers were always in bloom.
Then the bad man came, with his black turtleneck and glasses, and he stood on a stage in front of a cheering audience applauding the end of sanity in web design. The dark followed the bad man, everyone wanted to make something that worked the same as the bad man's device, but they all had different thoughts about how big those devices were, the "perfect" aspect ratio and even how many pixels to jam into every square inch. Bedlam ensued. Now there are literally hundreds, if not thousands, of varying device sizes, pixel densities and aspect ratios across more and more devices every day. There's simply no efficient way to detect the individual device and serve appropriate code, so now we have to design our sites to be fluid with certain breakpoints in mind for a handful of specific devices.
There will always be some cross over where a small tablet gets the phone css or a large phone gets the tablet's, or maybe the refrigerator door sees the desktop css when it was really supposed to see what the dash board of the luxury car uses.
My point is, crossover is inevitable. You'll drive yourself nuts trying to design for every possible specific device. If there is one you absolutely need to have, combining the other attributes available to css media queries can help. Device-width and pixel density are good ways to help narrow down the css for very specific devices, but even then there will likely be unexpected crossover with some other device that reports to the browser in an unusual way.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Jon+Fritz+II wrote
Device-width and pixel density are good ways to help narrow down the css for very specific devices, but even then there will likely be unexpected crossover with some other device that reports to the browser in an unusual way.
As I keep pointing out (probably because as a designer, my thinking isn't as binary as a coder's) I'm not looking for a perfect, full-proof solution. Only the best available compromise known today (after having taken a break from web design for 4-5 years to design more).
The only method I've been taught to target mobile (just a couple of weeks ago, in this very forum) is screen width. In hindsight, this seems like a very blunt instrument to use when your iPhone and iPad both have 980px as width. Literally the exact same number. Since the screen proportions are different, I'm going to assume their heights differ as well.
If combining width with height and/or "pixel density" (is that really a thing?) will help me target phones better, even a little, I'd love to know how. It's why this thread exists.
Could you show me, by modifying the original example below?
@media screen and (max-width: 980px) {
.example { font-size: .8em }
}
When I change 980px to 979px, both the phone and the tablet receive the desktop layout. When I switch it back to 980px, they both get the minimalist phone layout. I'm trying to send the minimalist layout to the phone only. Desktop to the tablet.
Doesn't need to be perfect, just better than what I have now (width only).
Copy link to clipboard
Copied
I know you have asked about aspect ratio before, but css allows you to target screens not just by width, or height. It also allows targeting by the aspect ratio, resolution, and about 25 other device features -
see the media features section of -
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
then of course you have the @viewport css queries which is mainly IE/Edge at the moment, and behind a flag in chrome and firerfox. -
https://www.w3.org/TR/css-device-adapt/
You can use no media queries upto x-amount of media queries, depending on how specific you wish to target devices, and depending on how important some features in css are to your layout, you could also include @support rules -
Copy link to clipboard
Copied
To add to my previous post, look at using the orientation feature.
Copy link to clipboard
Copied
Sure, sorry, I was away from my desk...
With your devices of choice, go to Device pixel density tests and see what they report. You then create a css media query targeting what comes back. For example, if I want my website to have larger text on my iPhone 7, but nothing different for my desktop, I could use the following...
@media screen and (-webkit-min-device-pixel-ratio:2) {
.example {
font-size: 3em
}
}
To make the size of the text within the example container 3 em.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Jon+Fritz+II wrote
Sure, sorry, I was away from my desk...
With your devices of choice, go to Device pixel density tests and see what they report. You then create a css media query targeting what comes back. For example, if I want my website to have larger text on my iPhone 7, but nothing different for my desktop, I could use the following...
@media screen and (-webkit-min-device-pixel-ratio:2) {
.example {
font-size: 3em
}
}
To make the size of the text within the example container 3 em.
Ah, so this is what you meant by pixel ratio. Interesting website there, but I'm confused by these numbers I'm finding.
- My two mobile devices are : iPhone 5S and iPad 4th Gen (model A1458)
- According to online specs, their native resolution is 640x1136 and 1536x2048 respectively.
- Your site lists them as pixel-ratio "2" which the devices have themselves confirmed via auto-detection on said site.
- After numerous tests using @media screen and (max-width), I've determined that for whatever reason, BOTH devices BELIEVE they're 980px in width (not 640px like the iPhone should be, and not 1536px like the iPad should be... but specifically 980px for both).
Could you help resolve this X-File for me?
So there's no misunderstanding, let me be as literal as I can.
@media screen and (max-width: 980px) {
.example { font-size: .8em }
}
...will be picked up by both devices (Chrome on iPhone 5S and Chrome on iPad 4th Gen)
But...
@media screen and (max-width: 979px) {
.example { font-size: .8em }
}
...will find a taker in neither device.
I had assumed, based on those tests, that both devices were 980px in width and simply using different pixel densities. But stupid me, right? Didn't even bother looking them up until now. And while they do appear to be using different densities (326ppi for the iPhone, 264ppi for the iPad, according to Wikipedia), that still doesn't explain why both devices seem to think they have 980 pixels in display width when queried.
Given the specifics I just dug up, shouldn't I be able to specifically target each device via its width + pixel ratio alone? Why are they both responding to 980px and not what they're supposed to be responding to? (I understand that width alone can't be the final solution, I'll probably target a combination of pixel density + aspect ratio... but I need the numbers to line up with the basic stuff before I can move on to that.)
I feel I am this close to understanding this media screen stuff, but I'm still missing something obvious.
Copy link to clipboard
Copied
You're understandably confusing device pixels with browser viewport. They are not the same.
As an example,
Copy link to clipboard
Copied
If both devices are reporting a css pixel width of 980 at a pixel ratio of 2 (I assumed they wouldn't, oh well), but are totally different sizes, you can target the device-width instead (which is -usually- a totally different number from the css pixel count reported to the browser)...
*/ipad 4th gen should be */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
styles:here;
}
*/iphone 5S should be...*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
styles:here;
}
Copy link to clipboard
Copied
As per the examples of the article that I quoted:
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}
Copy link to clipboard
Copied
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
Thanks for bringing me back to this, Ben.
Does that first conditional statement I just quoted (which targets all portrait-oriented mobile phones) also include the iPhone 4-5-6 listed further down? Or do I have to combine conditional statements in order to have ALL phones pointing to the same block of code? If the latter, can I push my luck a bit further here and ask you to show me how to do that? I'm kind of new to @media screen (and I have a single, flexible single-column layout for all phones)
Second question... when a phone -- which is a natively portrait-oriented device -- is held sideways (so that it is now landscape-oriented), is it still recognized as a portrait-oriented device, or does it change the condition and switch to the desktop code?
I wasn't looking forward to my first steps into website responsiveness, but thanks to the help of the Adobe Super-Friends in this sub, the desktop (ie, main) layout is elastic AF (pardon my French). If I narrow the width of my browser, it all deprecates beautifully from over 1920px down to single-column 480px, and the design suffers none at all. I'd even be hard-pressed to name a "sweet-spot" resolution.
The hard part has been sending the single-column layout to the phones as the default state.
Copy link to clipboard
Copied
- To start with, personally I would have just 4 media queries, namely
i) phones landscape
ii) tablet
iii) desktop
iv) desktop large - A phone held sideways will picked up as landscape
Have a look at what Bootstrap defaults at:
// Extra small devices (portrait phones, less than 576px)// No media query for `xs` since this is the default in Bootstrap// Small devices (landscape phones, 576px and up)@media (min-width: 576px) { ... }// 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) { ... }
Note that device width is used as opposed to the resolution and that the design is mobile first..
If, as you say, you have just the one column for all mobile devices, you can ignore the first media query and place all of the relevant style rules in the general part of the style sheet as the default.
If the extra large devices have the same layout as the tablets, then you can also ignore the last two media queries - just an example.
Keep in mind, that all of the style rules that are stipulated in the general part of the style sheet, will carry over to all screen sizes until it is overridden using the media queries.
Copy link to clipboard
Copied
BenPleysier wrote
- To start with, personally I would have just 4 media queries, namely
i) phones landscape
ii) tablet
iii) desktop
iv) desktop large
You've more than adequately explained how to send 4 different style adjustments to 4 different media queries... thank you. However, that's not what I'm trying to do. I'm looking to send a single set of style modifications to ALL phones -- so, none in particular -- meaning anything smaller than a tablet that's also taller than wide.
Main Design : Tablets, Laptops and Desktops (of ALL sizes and orientations)
Fallback Design (single-column) : Phones (Portrait orientation only)
So rather than use 4 media queries to target 4 devices with 4 different responses, my goal is create only ONE media query pointing towards all the adjustments required to strip the main layout down to single-column (for Phones).
Something like this, at the bottom of my main stylesheet :
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
.folio a.item { float: left; width: 100vw }.a1 .item { margin-left: 0 }
.diag, .cap, .referral span.hole, .headline span.hole { display: none }
.a2 div.lead { width: auto }
.a2 div.text { padding: 0 }(etc.)
}
Thanks to your help, the above code targets my iPhone 5S just fine now, and leaves my iPad alone (you should have seen me jumping up and down yesterday). I'm just worried that it won't target OTHER phones I can't test, that were also in the list you gave me. I'm still not 100% sure whether or not the "all mobile phones + portrait" condition quoted above also includes all the other phones... and if not, how I can modify this so that it does.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Under+S. wrote
So rather than use 4 media queries to target 4 devices with 4 different responses, my goal is create only ONE media query pointing towards all the adjustments required to strip the main layout down to single-column (for Phones).
If you use flexbox, with the row wrap property it will automatically adjust to any device. Providing you use vw or % for the width of any element, (along with a max/min-width in px or any other fixed unit).
Copy link to clipboard
Copied
If you have just two layouts, then you need one media query, namely
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
The general part of the style sheet will cover all anything that is smaller than 768px wide, the media query will pick up override for anything larger.
If, and only if, you discover that some feral device has escaped your intended design, you could use a more specific media query to remedy the situation.
Copy link to clipboard
Copied
I would strongly advise against using your mobile devices as more than a general idea of how a layout will look. Once you do that you are designing for specific settings. The iPhone X and iPad pro have a pixel density of 4x, double that of the iPhone 5, and many devices are starting to use that type of screen.
Text on all the devices are upscaled from the users settings to have the size appearance of a standard 1x screen, (but a hi-dpi apearance) providing you use the viewport meta tag set to 'device-scale 1'. The only items you have to worry about when designing are images and videos, as these are displayed at the created pixel density.
For images use the srcset property in html and image-set in css, for video it is best to offer the user the standard 1x video and an option to view a hi-dpi version if they wish.

