Ive made a website that renders fine in all browsers, but when viewed on a phone or tablet the body font whose weight is font-weight: 100; just comes out to fine.
Is there a way i can write a css conditonal to target mobiles and tablets, similar to the IE conditional ?
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
You should use media queries: http://www.w3.org/TR/css3-mediaqueries/
Examples (Quoted from Bootstrap's site):
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
OP,
Within your CSS you can do media queries to conditionally hide/show/modify elements based on the size of the screen that is viewing them.
CSS
#media (min-width: 1200px) {
/* Large desktop */
}
#media (min-width: 768px) and (max-width: 979px) {
/* Portrait tablet to landscape and desktop */
}
#media (max-width: 767px) {
/* Landscape phone to portrait tablet */
}
#media (max-width: 480px) {
/* Landscape phones and down */
}
Via Twitter Bootstrap Docs on responsive design. Hope this helps.
There are no conditional comments for mobile devices because they should operate exactly the same as desktop browsers. (What I think is a mess by the way. Responsive design is good, but not a solution for everything)
Related
How can I apply the css only for desktops and laptops browser excluding ipad and mobile browsers?
#media only screen and (min-width: 742px) and (max-width: 769px){
#element{
display: none;
}
}
How can you guarantee a user isn't going to view your site/webapp on a desktop device that falls into the viewport width you have stated? You can't.
If really need to be that specific, device specific as apposed to using viewport width, you can sniff the browser I guess.
Here is a quick jquery demo here using:
navigator.userAgent
http://jsfiddle.net/y3ds0xpv/ - note: you'll need to view on a mobile device to see the difference between desktop and mobile.
Ultimately, I'd recommend using this if you need to use this method:
http://detector.dmolsen.com/
You could always do it like this (modified from here):
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
#element{ display: none; } /* your css rules for ipad portrait */
}
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
#element{ display: none; } /* your css rules for ipad landscape */
}
I'm sure you have a valid reason for doing this but I'd be careful. As a rule you should detect features, not devices.
A media query to target iPads (portrait and landscape) would be:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
so to avoid targeting iPads you can just reverse that and get everything larger and everything smaller..
#media only screen and (max-device-width:768px),(min-device-width:1024px) { }
#media only screen and (max-width: 769px){
#element{
display: none;
}
}
#media screen and (min-width:1000px){
#element{display:none;}
}
Using Foundation framework you will have options for all screen sizes be it desktops, tablets or phones. Using their 'large', 'medium' and 'small' functions. It is fairly easy to use.
With Foundation your problem would be fixed by just adding hide-for-small and hide-for-medium classes to the div being displayed only on desktop.
Finally, I got working media query only for desktops or laptops browser:
#media only screen and (min-width: 742px) and (max-width: 769px),
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
#element{
display: none;
}
}
Glad to say, it is working nice.
I am using media query #media all and (max-width:500px) {..} to make site design responsive. It is working fine on my opera mini. But i have not tested it on other other mobile browsers. Will it also work on other mobile browsers or i have to add (max-device-width:500px) in this media query.
max-width is fine enough
/* smaller than 980 */
#media screen and (max-width: 980px) {
your css here
}
/* smaller than 650 */
#media screen and (max-width: 650px) {
your css here
}
/* smaller than 480 */
#media screen and (max-width: 480px) {
your css here
}
There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I'd recommend taking after Twitter's Bootstrap with just these four media queries:
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check it out on Bootstrap 3's docs.
Design in percentages and initially optimized for a 15"+ screen.
Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within #media (max-width: 480px) { ... }
As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. #media (max-width: 767px) { ... }
Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.
At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).
If you are comfortable w jQuery you can add
$(window).resize(function(){
console.log($(window).width());
});
to get the current screen size. Add a few extra pixels for good measure.
The first Twitter Bootstrap code referenced by #cjlarose assumes that you've built your main CSS for a display that is between 980px and 1200px wide, so you're essentially starting with the desktop design and adapting all of the others from it.
I'm glad to see Twitter has changed to "mobile first" in Bootstrap 3. It's one of the most popular approaches to media queries, and the way I prefer to do it. You start from the smallest size rather than from the desktop out.
Note that your particular site may need different queries than what are listed there or on any other list. You should add queries as your content demands, not based on any set template.
Here are some media queries I've found most useful. These are just some examples:
/* Start with baseline CSS, for the smallest browsers.
Sometimes I put this into a separate css file and load it first.
These are the "mobile first" styles. */
...
/* Then progressively add bigger sizes from small to large */
/* Smartphones start somewhere around here */
#media (min-width: 300px) {
}
/* You might do landscape phones here if your content seems to need it */
#media (min-width: 450px) {
}
/* Starting into tablets somewhere in here */
#media (min-width: 600px) {
}
/* Perhaps bigger tablets */
#media (min-width: 750px) {
}
/* Desktop screen or landscape tablet */
#media (min-width: 900px) {
}
/* A bit bigger if you need some adjustments around here */
#media (min-width: 1100px) {
}
/* Widescreens */
#media (min-width: 1500px) {
}
The most important thing is that you may not need all of these, or you might want to change the numbers depending on what your content looks like. I don't think there are any really hard rules about how many or where to put your breakpoints. I'm doing a site right now that happens to only need one breakpoint because the content is pretty simple, but I've also done sites that look more like the code above.
I didn't include the retina display code. That's useful if you're switching out normal-resolution images for high-resolution images on hi-res displays, but otherwise it's not really that useful.
I have been working for a while now with responsive design, and twitter's bootstrap seems to be one of the best responsive frameworks.
But I have a question regarding the media queries. I see in their documentation the following :
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
And as I'm already testing it, between the 979px and 1200px the layout has no styles so everything will be messed up. So I don't understand the logic in there, could someone explain me please ?
It is supposed that width between 980px an 1199px is default and don't uses special media queries. So, you define all your styles for that width and after that, you justify your styles for other, "non-standard", screens.
I am trying to build a site with iphone / android / ipad compatibility but do not possess these devices. I tried using the Responsinator, but noticed that it was not even picking up my iphone media queries, such as:
/* iphone */
#media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
The background for #wrapper was not showing up red on the Responsinator's iphone viewer, but on an actual iphone it is. Are there any good free sites or apps that will pick up css media queries so that I can develop for these devices without having to own all of them?
Thank you
I think the reason they're not picked up in "normal" browsers is that you're using max-device-width. If you use max-width instead they'll work "everywhere" (not IE).
I'd also suggest coding mobile first. Instead of starting with the largest resolution and working backwards, start with the smallest and improve the layout as the resolution grows.
Personally I use this code:
/* Default */
/* Little larger screen */
#media only screen and (min-width: 480px) {
}
/* Pads and larger phones */
#media only screen and (min-width: 600px) {
}
/* Larger pads */
#media only screen and (min-width: 768px) {
}
/* Horizontal pads and laptops */
#media only screen and (min-width: 992px) {
}
/* Really large screens */
#media only screen and (min-width: 1382px) {
}
/* 2X size (iPhone 4 etc) */
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
From: http://stuffandnonsense.co.uk/projects/320andup/