I am trying to write a functionality enabling users to switch between mobile and desktop layout. I am using media query for differentiation of the layouts:
#media screen and (max-width: 1024px) {
.... some definitions
}
My understanding is, VIEWPORT META tag should affect the media query. So, I think this
<meta name="viewport" content="width=640" />
should cause positive evaluation of my condition
#media screen and (max-width: 1024px)
Unfortunately, it doesn't. Am I wrong? If yes, is there a way, how to affect the media query?
My understanding is, VIEWPORT META tag should affect the media query.
Only in browsers that support it. Desktop browsers generally do not.
If you want to allow Desktop browsers to use CSS you normally only want for smaller screens, then your best bet is to use two separate <link> elements and use the media attribute to specify your media queries. Then use JavaScript to change the media queries to match the display (instead of the display to match the media queries).
Related
I'm applying media queries on my project , but when I`m resizing the browser , it doesn't work.But when I resize it from the developer tool (inspect element) it works...It sounds ridiculous but I'll show you with images.
In the following picture. I've applied media query for my menu-bar. As you can see , when I resize my browser , it doesn't work.
but when I resize the project from the developer tool , it works... I've applied only <meta name="viewport" content="width=device-width, initial-scale=1"> for the media queries.
The second issue is the following. Is there <meta> tag for tablets viewports?
Now my Media Query works on all mobiles , but on tablets doesn't. I've tried to reach some answer for mu issue but I didn't find anything...
My thoughts are that its because your query only applies to the device. If you were to try something like:
#media screen and (min-width: 480px) {
background-color:red;
}
Try that, but to be honest, I would think about introducing a style framework like Bootstrap.
It takes most of the headache around queries away. Also, it's great because you generally want to cater to mobile screens first, and Bootstrap does this pretty well by default.
How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)
Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.
I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?
I feel like I'm missing a very obvious trick!
How it should work when adopted into the CSS standards:
Use #media queries in CSS, along with the #viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:
http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/
An example from the above link:
#media (max-width: 699px) and (min-width: 520px) {
#viewport {
width: 640px;
}
}
You could use this to set different viewports on narrower and wider devices.
But for now, seems JavaScript is the only way to do it:
You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.
See http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript
Use media queries for different sized screens, ie: small(phones), medium(tablets), and desktop versions. You will only change the content thay needs changed in the queries. Then also set a meta tag with the viewport set at 1.0. Search around for media queries, there's a lot of information of there. Good luck!
I'm looking for the correct CSS media query to target all phones (not tablets and larger) including 1080 phones such as the Sony Xperia Z.
Right now I'm using:
<link href='style/mobile.css' rel='stylesheet' type='text/css' media='screen and (max-device-width: 767px)' />
That works for most devices, but in the Android Firefox Browser (not Chrome though strangely) the Xperia Z just gets the desktop site only.
I've tried searching but it seems no one is talking about these new very high-res phones, is there a new standard I should be adhering to?
Use max-width instead of max-device-width to target CSS pixels.
Do not forget viewport meta. Small devices with lots of pixel will still have a low CSS pixel count so it will just work.
You can combine the width with resolution in your media query.
#media screen and (max-device-width: 767px) and (min-resolution: 300dpi) { … }
I don't think you'll find what you need in media queries. Phones and tablets have a big crossover in resolutions.
Here are the media features you can query according to the w3c...
http://www.w3.org/TR/css3-mediaqueries/#media1
... none seem to be what you're looking for.
Unfortunately I don't know if a great way to deal with this, even the user-agent is of little help.
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I have had a look around but need a more concise answer to this question.
I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:
CSS resets (everything to use)
The normal desktop 'screen'. (only desktop computers)
Printing 'print' (only printing)
The iPhone/handheld (only handheld)
IE6 stylesheet (only IE6)
So my question is: Am I right to think the right way to control this would be..
set the media="all" for the resets.css
set the media="screen" for the
desktop.css
use conditional comments 'here' for
legacy browsers.
set the media="print" for printing.css
use css3 media queries such as :
#media only screen and
(min-device-width: 320px) and
(max-device-width: 480px){ }
has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?
It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:
http://stuffandnonsense.co.uk/projects/320andup/
You can learn a lot just by looking at how these guys developed their boilerplate.
And, to see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.