I'm doing a mobile-first approach but now I need to target desktop browsers only to style the scrollbars in chrome.
#media (min-width: X) isn't what I'm looking for, I really want to target the device
#media not handheld doesn't work because iOS and android think they're not handhelds
I know that #media only screen should target mobile devices but what is the opposite? The closest I came was #media not only screen but that doesn't work.
EDIT: To clarify. With mobile-first I mean that I don't want to style the scrollbars for all devices and then make an exception for mobile. I want it the other way around: mobile should be the default, desktops are the exception
EDIT 2: More clarification. I'm not looking to target desktop because of a breakpoint in size, I want to target capabilities and/or behaviour. For example, using the :hover selector on mobile is bad because touchscreens don't have mice but they DO activate that selector when you tap an element and then never de-activate it until you tap something else. They treat it as :focus. So I would not want to declare that except for desktop (again, desktop should be the exception here, not the other way around).
Related
I've seen other questions, but no answer has helped me yet.
I have set a media query to:
#media only screen and (max-device-width: 767px) {
/* css here */
}
which I want to make the page on phones render the same in both landscape and portrait.
on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.
i've tried the specific landscape orientation tags, and that also fails.
i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.
i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).
the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!
Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.
The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.
#media all and (max-width: 767px) {
css in here
}
I prefer using max-width.
The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.
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.
Im working on a website that im trying to make responsive.
So far , it works on desktop and mobiles phones (iphone , galaxy s4..ect)
Im having a hard time trying to make the website, when its on tablets (ipad , nexus 7 ..) look like its on a mobile phone.
My website is here - http://mk18.web44.net/index2.php
you can use http://quirktools.com/screenfly/ to see what I mean. Change the setting to a mobile phone like iphone. Thats what I want it to look like on an ipad.
You can look through the css - http://mk18.web44.net/css/styles.css
Thanks
For what I've seen, it seems to me that you are trying a bit too hard.
In order to make it like for iphones, you have to make the media query of #media(max-width: 768px) with the same instructions as the #media(max-width: 360px).
If that's what you want, my advice is to remove the #media(max-width: 360px) completely and just leave the #media(max-width: 768px) - the css instructions within will only be applied for devices smaller than 768px in width (this includes iphones, and other phones).
Also, you should do some clean up. Css code will be parsed from top to bottom, so css instructions without any media query (the #media bit) will always be applied in all devices, until there is an override. One can create as many #media queries as needed, but that doesn't mean you should.
With the right css foundation, you can accomodate most devices without media queries, using them only to reorganize content and user interface just enough so that it remains usable.
Hope it helps.
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.