On my site, im using standard css to apply for everything, except
#media (max-width: 480px) {
if my screen/browser is equal or lower than 480, it uses whatever thats under that media.
But my problem is that it dosent work on my iphone (iphone 5S).
I was able to find out that #media (max-screen-width: 480px) { would work, but then my browser width on 480 wont apply to it.
I have searched around different sites , but all i see of their entire css files, is that they only use max-width, and while vising their pages, it works great on my phone.
Question: How can i easily do so it would apply for both browser and screen/mobile?
just add this indise your head tag
<meta name="viewport" content="width=device-width">
and css:
#media screen and (max-width: 480px) {
// code goes here
}
Related
I am working with media query, for a desktop version of a website.
The behavior that I was looking for was:
- Full screen rendering
- No redimensionning when minimizing the viewport (the right sided content is hidden)
So I defined ranges of screen resolutions, and tried with min and max device width like this, on my .css file:
#media screen and (max-device width:1535px) and (min-device-width:1365px) {
html{
font-size:80%;
}
#mainframe{
width:1000px;
}
}
This is working well on chrome and firefox but after research device-width seems not to be compliant with ie 9. (min-width workà
( I added this meta tag on my html file :
<meta http-equiv="X-UA-Compatible" content="IE=9">
with no effect)
Is there a way to bypass this?
It may be my ignorance, but I think any newbie question is welcome where there's an opportunity to distinguish between right and wrong.
For responsive and mobile-friendly design, I'm using
#media only screen and (max-width: 800px){}
from the very beginning with success. However when I uploaded the site to the server and browsed the site from mobile devices, it's not working. Then I learned to use
#media only screen and (max-device-width: 800px){}
Now it's working fine (Note: the -device in the middle).
But with -device in place I can't see the preview when developing the site in my desktop PC. So when I'm developing, I'm using without -device, and after upload I'm using the -device in the middle. It's a bit odd to me.
Recently I faced an interview board, where I submitted one of my mobile-devices friendly site for review, but when they resized the browser, it's not working because on the live site I used -device in the media query. So, it's a bit odd for me.
Is there a way I can code so that the code both works in Desktop with its media queries and also in mobile devices. I tried
#media only screen and (max-width: 800px) and (max-device-width: 800px) {}
But FAILED in my Desktop. :(
Is there a way?
EDIT
To acknowledge that, I'm in the right way, I'm using
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
in my <head></head> tag. And using Respond.min.js also.
#media screen and (min-width: 321px) and (max-width:960px){
xxxx
}
#media screen and (min-width: 720px) and (max-width:1024px){
xxxxx
}
JSFiddle
max-device-width is the width of the rendering area of the device,
max-width is the width of the target display area
max-width is the proper way to go with. Did you place de viewport meta tag in your HTML page?
<meta name="viewport" content="width=device-width, initial-scale=1>
I've researched this question and tried to solve it on my own for hours, to no avail. Hoping one of you can help. I am using this media query for the style I want on a desktop browser:
#media all and (min-width: 320px) {}
And I'm using this media query for the style I want on mobile browser:
#media screen and (max-width: 320px) and (min-width: 0px) {}
When I drag the desktop browser to less than 320px, the style changes accordingly. But when I bring up the website on a mobile browser, it displays the desktop style. What am I doing wrong?
You need to include this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope it helps!
I've done a lot of reading off of stackoverflow and various sites off of google, but I haven't been able to find a solution for this yet. :(
I have in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile-style.css" />
(I originally only had the first two in my meta viewport content (width=device-width, initial-scale=1.0), but added the second two after reading through some articles.)
In my mobile-style.css file, I have:
#media only screen and (max-device-width: 568px;) {
...
}
I have experimented with the max-device-width here as well, it has been 320, 480, 600, and 680... none of them work.
I can view this mobile stylesheet on my xperia Z using the dolphin browser (but not the Chrome browser), and on my friend's iPhone 3GS. Elsewhere it doesn't show up. The goal is just a simple mobile layout for the current site for any smaller-sized screen device.
Let me know if I should be providing more information.
Thanks! :)
EDIT
Here is the gist for my mobile-style.css file: https://gist.github.com/melissanoelle/7043032
Sorry for the delay, I've been away from a computer while traveling for my grandfather's funeral. :(
try this:
#media screen and (max-width : 480px) { /* change to your breakpoint */
...
}
Do you find any difference once you change your media query from:
#media only screen and (max-device-width: 568px;) {
...
}
To
#media all and (max-device-width: 568px) {
...
}
Are you sure you want to use max-device-width and not the max-width (targeted display area)?
Change your viewport to this:
<meta content="width=device-width, initial-scale=1" name="viewport">
Do you still have issues?
Turns out I needed to change my css query to this:
#media screen and (max-width: 568px), screen and (max-device-width: 568px) {
...
}
I got rid of the semi-colons and created a query for both max-width and max-device-width.
I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.
Is this a feature that is not ready for implimentation yet?
If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?
The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.
http://www.w3.org/TR/css3-mediaqueries/
If you want to adjust the style when the viewport is less than 1024px you can use this rule:
#media screen and (max-width: 1024px) { … }
anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.
To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
To apply a style sheet to a document when displayed on any device less than 400 pixels wide:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
inside
#media all and (max-width:800px) {
body { color: red; }
}
for iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::combining media query
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.
Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:
320 and up:
‘320 and Up’ prevents mobile devices
from downloading desktop assets by
using a tiny screen’s stylesheet as
its starting point.
Lessframework:
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid.