It's my understanding that this query would target specifically my iPad Air 2 and apply the styles that I have added. However, nothing is applied and it looks the same as the Desktop view. I had to apply a different menu for my website to scroll properly on my iPhone, (overflow-y:scroll / hidden didn't work so I created multiple sections that display menu options as opposed to displaying the content in a div) but I'm having troubles targeting iPads as they also do not scroll properly.
#media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/***
my css goes here
**/
}
The following works on iPad Air 2
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
Put this meta tag in before the query:
<meta name=viewport content="width=device-width, initial-scale=1">
You can read more about what it does here: Responsive Meta Tags
You may want to not put all of the desktop and mobile css all in the same page but make links to different sheets. That way you save on initial load time and won't waste time loading both of them. Like this:
<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' />
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />
Related
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 am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.
If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.
Reason why is the lack of responsive ads which currently exist in germany.
Anyone has a clue for me how to achieve it?
You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.
#media only screen and (min-device-width : 1024px) {
/* Styles */
}
You can also target retina displays:
#media only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Edit: See this SO thread for more info.
Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
I'm looking answers for some questions about CSS3 feature - Media Queries:
Which way is better (for browser due to the performance) for declaring css rules for different resolutions?
//this in head:
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
//or this in css file:
#media only screen and (max-width: 1024px){
//styles here
}
What is difference between max-device-width and max-width? Is it only rule addressed for mobile(max-device-width) or desktop(max-width) browsers?
If I write media query rule for tablet with resolution 1280x800 where user can also use portrait/landscape mode, how should it look? I should write rules for max-width: 800px and max-width: 1280px or there is another way?
If I write rules I should write something like this:
<link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
or instead this two:
<link ... media="only screen and (max-device-width: 480px) ... />
<link ... media="only screen and (max-device-width: 1024px) ... />
P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language
P.S.S. Before I posted this question I spend a while to search on stackoverflow and didn't find information about this question. If I was wrong and there is similar question I will delete my post.
Rules in css file to reduce number of requests (better for performance).
max-width is the width of the target display area
max-device-width is the width of the device's entire rendering area
The another way I know to target portrait or landscape is to add orientation like this:
/* portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* styles here */
}
/* landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* styles here */
}
To define a stylesheet for mobile devices with a width between 320 and 480 pixels you have to write:
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
I'am searching for good information about best practices in responsive design and I'll give you an advice.
In This question the developer get into a problem when he use CSS portrait condition and make the keyboard appears when he choose a input text of the document. I'm not sure why but it breaks the portrait condition.
In This website you can find information about better practices when you are creating media query's which I think are the best. Personaly I'll use the Exclusive type of media query in my website.
But by the other hand you could follow This site recomendations. I think that they are right but I prefer to create and use popular device dimentions media query's by myself.
Here is the list:
< 480px (which applies to older, smaller smartphone screen sizes)
< 768px, which is ideal for larger smartphones and smaller tablets
768px, which applies for everything bigger such as large tablet screens and desktops screens.
Also, these can be used too if you've got the energy and time:
<320px, which is great for older small, low res phones
1024px stylesheet for wide screens on desktops.
I hope it help you.
So I'm using an #media query to use a different css file on the mobile version of my site. Here's the head of my html:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />
However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.
I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.
Any thoughts?
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
Wrap your desktop css in a media query that targets desktops
Use your media queries in a conditional fashion like this:
#media screen and (max-width: 800px) {
<link to mobile stylesheet
}
#media screean and (min-width: 801px) {
<link to full stylesheet
}
Note that all platforms will use "#media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.
Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.
Whether you link "only screen and (max-device-width: 800px)" or build into your css " #media #..."
You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.
so basically
only screen and (max-device-width: 800px) - for your mobile devices
and
only screen and (min-width: 801px) - for desktops
If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.
I am trying to use a media rule to target CSS to iPad only. I want to exclude iPhone/iPod and desktop browsers. I would like to to also exclude other mobile devices if possible.
I have used
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
but just found out that desktop Safari 4 reads it. I have tried variations with "481px" instead of "768px" and another that adds an orientation to that:
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
but no luck. (Later we will be sniffing user-agent strings for iPad, but for now that solution won't work.)
Thanks!
Update: it seems that desktop Safari uses the width and height of the screen at the moment and gives itself an orientation of portrait or landscape based on that. It doesn't look as though the widths and heights will rule out desktop browsers (unless I'm missing something).
https://mislav.net/2010/04/targeted-css/
media="only screen and (device-width: 768px)"
Thanks to Mislav Marohnić for the answer!
This works for iPad in either orientation and seems to exclude desktop Safari.
When I was testing (min-device-width: 768px) and (max-device-width: 1024px)
I could see Safari 4 using the styles or ignoring them as I widened or narrowed the window.
When testing (device-width: 768px) I tried to make the desktop Safari browser exactly 786px wide, but I never got it to see the styles.
I use PHP to do that. I isolate the plateform from the USER_AGENT string. Then I only have to use a if($plateform == 'iPad') {.....}
It's that easy!
This is a quite simlifying demonstration:
http://css-tricks.com/snippets/css/ipad-specific-css/