I tried setting two different styles for a website using #media. But it always loads the desktop view no matter if I use a phone or a computer.
/* desktop screen */
#media (min-width: 801px){
content desktop
}
/* mobile screen */
#media (max-width: 800px){
content mobile
}
What have I done wrong?
The actual answer to your question is: you're using width and device-width wrong. Change line #169 from:
#media (max-device-width: 800px){
to:
#media (max-width: 800px){
If you want to target phones specifically, it is a good idea to look at media queries used by popular frameworks such as bootstrap or foundation. You'll find that many target much smaller sizes such as 320px or 480px as opposed to 800px in your code.
The thing is CSS media queries distinguish features not devices. So you can try to figure out which features correspond to the device you want to refer to. In this site you have media queries for iPhones, iPads. So for example:
iPhone 6 in portrait & landscape:
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
These queries try to reduce the case to get to an specific device using its features. In this site you have a set of predefined queries for specific devices.
But notice that the difference between Desktop and Mobile might not be so obvious.
And don't forget to add meta in to <head></head>
<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
Related
HTML head-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1">
CSS media query-
#media handheld, screen
and (min-width: 200px)
and (max-width: 399px){}
i don't know why you using handheld.. I just post my answer media query for mobile.
#media only screen and (min-width:300px) and (max-width :399px)
{
}
First, handheld is not supported by most mobile browsers, you can see more from this question: Do iPhone / Android browsers support CSS #media handheld?
Second, the breakpoint of your #media doesn't quite match any mobile screen size, here a website listing media queries for standard devices that your can check on: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
When I simulate with Google Chrome inspector choosing the Galaxy S5 (360px), I am having problems detecting the proper screen width. It omits the CSS for the 360px and uses the 768px CSS instead. Is there a better way around this?
#media only screen and (max-device-width: 360px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:290px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
#media only screen and (max-device-width: 768px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:370px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
Just change the order or reverse of your media query. Write first 768 media query then 360.
you can add meta to your header.
<meta name="viewport" content="width=device-width">
you can also refer to this link for full details
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
I'm using Windows 10, Codeigniter, jQuery and Firefox 43.0.4 although I can't see why that would affect this issue. I want to apply styles to an iPad size window so I'm using this media query:
#media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
*{color:#ff0000 !important;}
}
as a test that should turn all text red but it's not working in Firefox 43.0.4 (or Chrome etc). I'm also using the Web Developer extension to set the portal to the correct size. I've used the head section metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Probably obvious but I can't see it and I've used media queries before. This is driving me nuts and I would be grateful for any suggestions as to where I'm going wrong.
I believe you are missing the device prefix, the CSS should be:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You can read more information on Stephen Gilbert's site.
You dont have to use min-device-width, just use min-width
#media screen and (min-width:768px) and (max-width:1024px) {}
Try something like this:
#media only screen
and (max-width: 480px),(min-device-width: 768px)
and (max-device-width: 1024px)
I appear to have fixed the problem by using Mathew Riches code above and the reason I didn't recognize this earlier is that, for me, it doesn't work in a resized firefox browser window which has been my testbed of choice. To use the resized browser I need to use:
#media only screen
and (min-width : 768px)
and (max-width : 1024px) { /* STYLES GO HERE */}
but that doesn't work on my iPad 4. And inciddentally any use of:
and (-webkit-min-device-pixel-ratio: 2)
with a pixel ratio of 1 or 2 killed the response on my iPad 4.
So the only way to test has been to upload every change in CSS and check on the iPad itself which is pretty irritating as I normally use my local server for all development.
I then discovered a problem with full-screen background images on the iPad but that is another story...
Many thanks to all contributors for your thoughts and for my purposes I now regard this query as solved.
I am looking to add some responsive web design to my site for iPad Portrait. I have my main css file (style.css) and then i have added the line below:
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
However when i try to set a div's background colour to red or something then resize the window i cannot see any change when it gets to the iPad Portrait size.
The stylesheet im linking to looks like:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
.myTile{background:red;}
}
I have tried it with and without this and no difference when i resize.
What am I doing wrong?
Any help would be great, I am just picking up responsive design.
Thanks
I would use:
#media screen and (max-width: 768px) {
/*styles*/
}
I also use max-width. What's the difference between max-width vs max-device-width? The difference, max-device-width only affects those devices that have a max width of XYZpx, so re-sizing a browser window on your desktop would yield no styling changes in relation to that particular media query. max-width, will yield styling changes on any device/browser that fits the media query. So re-sizing your your desktop browser and having the media query use max-width, you'd see the website as someone using an iPad would.
this is a great reference: Responsive Web Design
I would love to know, to optimize your website for Tablets, desktops and smarthpones, what is best to use: Media Queries or the Viewport meta tags? see code:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vs
/* 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 */
}
Both are necessary.
Media queries are used to have different css for different devices its like the if condition for different devices.
Viewport meta tag is to set tell the device to take the width according to this tag. Its like a reset for devices if its not used device will adjust the layout according to its default settings.
UPDATE: from 2020
You'll want a viewport meta tag (always)
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
and almost always a few #media break-points
but often (lately) - people try and leverage things with percentage, variable/relative units, flex-box, and auto-fill type grid situations to avoid #media queries
I think that all of those things can just work together for the best results. I like #media queries for many reasons. : ) They are all just tools to use! Stick to the goals - and the right tools will present themselves.
Here's a video that goes over the whole thought process.
And here's an article about the #media rule.
.....
(original answer for back-story)
i would say that every situation is different... and it is not an either / or situation. the viewport meta tag you have up there would make it so that the website will maintain the 1 to 1 ratio which in a lot of cases is good. however, it also is set user-scalable "no" - and that means that the user will not be able to zoom in etc... sometimes the way ipads and other devices change your site is for the best... (depends)
the best method i have found is to use media queries and to choose one of 2 dirrections:
start from small and build up
start from large and build down
stretch your browser window bigger and bigger (or smaller and smaller) and then when the website gets ugly, (just before) that is your next breakpoint... make the media query there... and repeat. don't pay attention to all of the device sizes --- this way you'll know that no matter what new devices etc come out --- you have engineered it to look nice at every possible size. (when it gets under 320 / i like to just make the site turn into a business card/// better to have readable info for none smart-phones...)
then after all this... test on devices and try out different viewport meta tags.
there are a lot of great articles about it... use keywords like "responsive design" or "adaptive" or "RWD" responsive web design. and good luck !!!
It depends what do you want to achieve.
If you want to design for desktop resolution only and have the mobile browser "zoom out"and assume a desktop like resolution than you can use only the viewport meta tags, setting the width to a fixed value.
If you want a true responsive design you should set the viewport meta tags to device-width and use media queries to plan the layout for different resolutions as you have shown in your code.
#Media Query use to Response our web site for other devices.
For example this query only works for devices with min 768px width and devices with max 1024px.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
What is a Media Query?
It uses the #media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
What is the Meta View port???
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I hope this may help you to understand about meta viewport and #Media query.
Don't underestimate either one!
You need:
Viewport meta to make your text actually readable
MQs to make your web page easy to use on small screens