It works, I see the stylesheet in the header and it does link to the stylesheet. But when I visit the site on my droid, I don't see any changes. Do you know why?
Did you try putting that into the stylesheet directly, like:
@media only screen and (max-width : 480px) { .outermargin { width:100%; margin:5px auto; } } I need to know if that works. :) I don't have a cellphone.
I have a slider in my theme. So I tried this directly in the css file
@media only screen and (max-width : 480px) { #slider { display: none; }
} }
It does not work. If I go to the site on my cell phone, the slider is still there. Is there something else that needs to go in the head section for responsive design that I don't know about
One user says that all the documentation is off because it's using zooms and things. Maybe this one: @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { /* high resolution styles */ } I'm considering whether jQuery might be used just to detect available screen width, and make it simpler than all this guessing.
Thinking it over, first you'd want this in your head, probably before you import your css:
meta name="viewport" content="width=device-width"
And then could you test this? I would hope that it would catch any device with a pixel ratio greater than 1, and then with a width less than the iPAds.
/* Catch anything higher than 1, and screen width less than iPad */ @media (-webkit-min-device-pixel-ratio: 1.1), (-o-min-device-pixel-ratio: 2.1/2), (min--moz-device-pixel-ratio: 1.1), (min-device-pixel-ratio: 1.1) and (max-device-width : 767px) {
this is being loaded into wordpress
It works, I see the stylesheet in the header and it does link to the stylesheet. But when I visit the site on my droid, I don't see any changes. Do you know why?
@media only screen
and (max-width : 480px) {
.outermargin {
width:100%; margin:5px auto;
}
}
I need to know if that works. :) I don't have a cellphone.
It does not work. If I go to the site on my cell phone, the slider is still there. Is there something else that needs to go in the head section for responsive design that I don't know about
Says your screen thinks it is 845px. I thought those screens were only about 2-3 inches across, no? try 845 + ?
@media (-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min--moz-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
/* high resolution styles */
}
I'm considering whether jQuery might be used just to detect available screen width, and make it simpler than all this guessing.
Edit: Found some more pages about pixel ratios:
http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx
http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/
If you use jQuery, that line could be useful:
var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html
This was very helpful for me to visualize what's going on.
And then there's Modernizr media queries: http://modernizr.com/docs/#installing
meta name="viewport" content="width=device-width"
And then could you test this? I would hope that it would catch any device with a pixel ratio greater than 1, and then with a width less than the iPAds.
/* Catch anything higher than 1, and screen width less than iPad */
@media (-webkit-min-device-pixel-ratio: 1.1),
(-o-min-device-pixel-ratio: 2.1/2),
(min--moz-device-pixel-ratio: 1.1),
(min-device-pixel-ratio: 1.1)
and (max-device-width : 767px) {
}