This question already has answers here:
Why are my CSS3 media queries not working on mobile devices?
(23 answers)
Closed 9 years ago.
I keep trying to do a media query in my CSS doc doing something like:
#media screen and (max-device-width: 480px) { /*css here*/}
but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?
Check that you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your doc
I always call mine when I link the CSS in the head of the HTML.
An example from a current page I'm working on:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)
When doing this within the CSS document itself, you should generally replace max-device-width with max-width.
this is a samples media query css
/************************************************************************************
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 560
*************************************************************************************/
#media screen and (max-width: 480px) {
your css here
}
Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data
<meta name="viewport" content="width=device-width, initial-scale=1">
Use "max-width" instead of "max-device-width" which is fixed per device.
I'm not sure but I think the max-device-width of an iphone is 640px. Give it a try.
#media only screen and (min-width : 480px) {
}
It seems to work fine in both Android and iPhone.
Related
I'm trying to hide and show a column when it's on desktop or on mobile.
I've been trying for few hours to make it work but to no avail. As you can see in the images attached, the one circled in red is what I'm trying to hide.
I tried to put in extra class named hide_mobile for the one I but it didn't work:
#media only screen and (max-width: 674px) {
.hide_mobile{
display:none !important;
}
}
Mobile
Desktop
Any help would be greatly appreciated.
Thanks.
if you are using wordpress you can do a stylesheet only for mobile.
For example mobile.css and with a php code in the header, you can call it only when you are using a mobile phone.This is an example for mobile and ipad:
<link rel="stylesheet" media="screen and (min-width: 80px) and (max-width: 700px)" href="/wp-content/themes/theme-child/iphone.css">
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='/wp-content/themes/theme-child/ipad.css'>
With me it works great.
I am working on my own website with self-made media-queries.
DEMO: JSFIDDLE
IMAGE EXAMPLE (mobile screen)
As you can see it works fine on deskopt, but I dont know why on mobile displays high resolution .
Any clue?
MEDIA QUERIES USED:
#media only screen and (max-height: 700px) {}
#media only screen and (max-width: 1023px) {}
#media only screen and (max-width: 880px) {}
#media only screen and (max-width: 700px) {}
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Note: Yes, I know I am not following the standars, but shouldn't be the problem (sure?)
It's a shame to me say this, but the problem was on the mediaqueries sintaxis.
I just forgot the ending tag "}", so modern browsers understands where it ends, but not the mobile ones.
I have searched and searched and I can not seem to find a reason why my html meta tag is not working on my iPhone. You can visit my website at http://hadenhiles.mooo.com. If you resize the viewport (window) you will see that my site responds totally as expected... however when you view it on a mobile device you get a result that looks as though it is a desktop version. here is the head tag and it's contents:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
As you likely have noticed I use my own stylesheet as well as the bootstrap3 stylesheet. I know I should likely stick to one or the other when it comes to layout but I made this website using only my own media queries before I was introduced to bootstrap. I only use bootstrap in the footer and for popups/navbar features. Anyway bootstrap is not the issue. It seems as though the meta tag is not recognizing the device width and is not setting the initial scale to 1.0. I have tried varying the min-width of my queries to debug but had no success. Here is are my css media queries:
/* Main css */
#media only screen and (min-width: 1px) and (max-width: 320px){
/* content */
}
#media only screen and (min-width: 321px) and (max-width: 600px){
/* content */
}
#media only screen and (min-width: 601px) and (max-width: 768px){
/* content */
}
#media only screen and (min-width: 769px) and (max-width: 1020px){
/* content */
}
I have tried switching from #media only screen and to #media screen as someone suggested in another question but had no success either. At first I thought that the min/max width was too big/small for mobile devices so I changed that and nothing happened. I have had this problem for about 3 months now so I decided to publish my own question. Any help you can give me is much appreciated.
~Haden
So this isn't exactly defining what's going on, although I do think that it is due to min and max conflicts. Try setting only max-width since that seems to be covering everything. It seems redundant to say min-width is 1px and max width is 320px and then for the next media query to be 321px. If you set the max-width to 320px, it will cover that range. If you set the next one to 600 pixels, it will cover the 320-600 range, etc.
#media only screen and (max-width: 320px){
/* content */
}
#media only screen and (max-width: 600px){
/* content */
}
#media only screen and (max-width: 768px){
/* content */
}
#media only screen and (max-width: 1020px){
/* content */
}
Alternatively, you might try using min-device-width and max-device-width. Here's a link to a decent resource on media queries for standard devices.
In a website, I use a media query for small devices, effective for screen resolutions <=980px.
Problems is: on the iPad, in horizontal view (1024px), the css file is applied.
Why is that?
On the desktop (Firefox), I don't have this problem. I tried changing to max-device-width, no difference.
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="medium.css" media="(max-width:1150px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:980px)">
Thanks for the answers so far.
To be clear: I am not looking for a way to target the iPad. I am looking for the reason behind the iPad's behaviour. It's screen has a width of 1024px, but it applies a stylesheet it should not. Why?
Edit:
I found the problem/solution. See below.
try to create the media query within a seperate CSS stylesheet, which will automatically detect what size the viewport is.
This site is a really good one:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Use this media query to to target all iPad versions (iPad 1-5 & Mini).
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
Additionally, check out the solution posted for this problem.
you don't have to create additional CSS file for this just use this and add your code
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
----CODE HERE----
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
----CODE HERE----
}
The iPad browser works with the following information:
width and device-width: 768 px
height and device-height: 1024 px
The orientation of the device does not matter in regard to which value is height and which one is the width!
That means in landscape mode, the browser promotes width = 768 px
In my opinion, this is a bug. The 'width' property should contain the width of the browser window.
Now I use the following media query on the website:
<link rel="stylesheet" href="mobile.css" media="(max-device-width:768px) and (orientation:portrait), (min-device-width:769px) and (max-width:980px)">
That works very well.
I need to float a div to the left when on the portrait mode via iPad. No matter what code that's inserted, nothing changes. Here's what I'm doing:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.logos{
float: left;
}
}
The site I'm working on: http://rachelsilberman.com/rob-anolik/
The "logos" div pushes down when someone is on the iPad, and I need it to float left so it will align with the contact div.
I've been using ipadpeek.com to view the outcome since I don't have one myself. Hopefully that doesn't make a difference.
Thanks!
You should be adding the attribute to your ipad css like below:
#media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (orientation:portrait) {
.logos{
float: left;
}
}
GENERAL RULE FOR CSS FOR IPAD IS LIKE BELOW:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
I figured it out tonight. This may help others. I had to comment out the following line in my library.php file:
<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->
After this, everything referred to the main style.css sheet which I wanted. I included two statements:
#media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {
and
#media (max-device-width: 600px) and (orientation: portrait) {
Due to the issues I was observing on a Blackberry Playbook versus an iPad, I had to introduce the second #media line. I simply tweaked the values within those sections of my style.css code and voila! Everything works finally.
Here's a great site on the different sizes for screens: http://nmsdvid.com/snippets/