tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
Related
Consider two screens:
same resolution
same orientation
but different physical sizes
Exempla gratia:
How can i target different screen sizes with CSS media queries?
Because, for example:
for the one 1920px wide display, it is uncomfortable to read the long lines of text that stretch edge-to-edge, and you'd want some padding, margin, or other spacing to narrow the text
but for the other 1920px wide display, you want text to go edge-to-edge
Bonus Chatter
And you can't try to invoke User-Agent strings:
i'm asking about CSS media queries, not User-Agent strings
the 4" screen could be connected to a PC
the 18" screen could be connected to a phone.
And you can't try to weasel out of the question by talking about orientation, or by musing if the screen supports touch or not, nor can you use the handheld attribute
I'm asking about using CSS to style a page based on the (physical) size of the screen.
Bonus Reading
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used (tries to rely on resolution)
Media Queries: How to target desktop, tablet, and mobile? (tries to rely on resolution)
How To Build A Mobile Website
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Using Media Queries For Responsive Design In 2018
What media query breakpoints should I use? (tries to rely on resolution) ("breakpoints" is another word for "pixels")
Media Query for Large Desktop
CSS media queries for handheld and not small browser screens
Media query about screen size instead of resolution
Well a typical media query for this would use min-width or max-width to hide or show things depending on display size. This is dependent on a <meta> tag which tells the browser to use the physical width of the display as the viewport width rather than using the resolution of the display as the viewport width.
For example:
<meta name="viewport" content="width=device-width"/>
and
#media all and (max-width: 600px)
{
/*Put your mobile styles here*/
}
It's not a perfect solution and doesn't really account for touch interfaces for tablets or other larger mobile displays, but it's a good place to start for building mobile user interfaces.
It's important to emphasize that this is intended for displays in which the content is scaled. I know for fact that most modern mobile devices use scaling (2x/3x on iOS and xhdpi/xxhdpi on Android), but it should also work with Windows scaling, though I'm not 100% sure on that and don't have a way to test it at the moment.
These media queries can accept any CSS unit as well, so you could very well use actual inches if you wish.
#media all and (max-width: 3.5in) { /* ... */ }
I have one stylesheet, which has both mobile-layout definitions and desktop-layout definitions. I would prefer to still have just one stylesheet.
The stylesheet splits definitions into #media screen and (max-width: 1049px) and #media screen and (min-width: 1050px) to separate mobile and desktop layouts. Sometimes they share the same layout for certain elements, hence why I don't use two stylesheets.
I would like a footer button that lets the user manually switch between these, so even if their screen is under 1049px they can still opt to use the desktop layout. I'd like to store this choice in the localStorage.
The issue is, how can I tell the different media queries in the CSS to also check the localStorage variable, preferably without having two stylesheets? What are my options?
I have to override the property of a css element when it is viewed on mobile screen. Like there is a logo and it's top margin should be different when on desktop and some other value when on mobile or tablet.
Is it possible. If yes then how?
You can do this easily with Media Queries in css.
Here is a link from where you can get all media quires used for mobile responsive layouts: Media Queries for Responsive Layouts
In specific curly brace you have to write the css for elements for which you want changes with mobiles, tablets and other devices.
Like, as per your question you can change css for logo for mobile, tablets and other desktop screen.
Let me know if it helps you or not.
Thanks,
Mrunal.
I have built a page with interactive world maps plugin at http://www.parentcenterhub.org/find-your-center/
All other pages of my site are responsive except this one. What CSS should I add and in which file so that this page is also responsive on all devices (Android,iPhone, tablets, etc.)
I don't know if twentythirteen is responsive by default, but that shouldn't be a problem. You should add media queries in your css file, specifying specific widths where your page 'breaks', and add css specific for that width.
For instance for mobile you'd have
#media only screen and (max-width: 767px){
/* css goes here*/
}
And for every major element you'd specify how it behaves when the width of your screen is less than 767px.
There are lots of tutorials on line, so check them out.
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 ;)