I have media query in CSS:
#media only screen and (max-device-width: 480px) and (min-device-width: 320px)
When I open elements inspector in Google Chrome and select device iPhone 4, it shows different from the original iPhone 4s screen and some other phone screens.. Why? What do I do wrong?
How can I see the iPhone 4's original look of the page in my Google Chrome or other browsers? Is there any solutions?
How it looks on iPhone 4:
How it shows in Google Chrome, when I select device iPhone 4 (on the top left):
instead
(max-device-width: 480px) and (min-device-width: 320px)
use only
(max-width: 480px) and (min-width: 320px)
Why?
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I fixed my problem by adding a <meta> viewport tag to <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
Now I don't have to use (max-device-width: 480px) and (min-device-width: 320px)
(max-width: 480px) and (min-width: 320px) <- work fine for all devices
Anyway, thank you all for your response.
Related
I tried setting two different styles for a website using #media. But it always loads the desktop view no matter if I use a phone or a computer.
/* desktop screen */
#media (min-width: 801px){
content desktop
}
/* mobile screen */
#media (max-width: 800px){
content mobile
}
What have I done wrong?
The actual answer to your question is: you're using width and device-width wrong. Change line #169 from:
#media (max-device-width: 800px){
to:
#media (max-width: 800px){
If you want to target phones specifically, it is a good idea to look at media queries used by popular frameworks such as bootstrap or foundation. You'll find that many target much smaller sizes such as 320px or 480px as opposed to 800px in your code.
The thing is CSS media queries distinguish features not devices. So you can try to figure out which features correspond to the device you want to refer to. In this site you have media queries for iPhones, iPads. So for example:
iPhone 6 in portrait & landscape:
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
These queries try to reduce the case to get to an specific device using its features. In this site you have a set of predefined queries for specific devices.
But notice that the difference between Desktop and Mobile might not be so obvious.
And don't forget to add meta in to <head></head>
<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
I'm looking to find out how to perform css based on whether either one of two statements is true. For example:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
OR
and (max-device-width : 1024px)
and (orientation : portrait){
}
I'm making a multi-platform website and have finished the mobile version, however I want iPads to have the laptop/desktop version, all was working good with this:
#media only screen and (min-device-width: 0px){Mobile Version CSS}
#media only screen and (min-device-width: 500px){Other Version CSS}
But then I noticed after changing a mobile to landscape, it would switch back to the desktop mode, due to the width of the media query being less than the screens landscape width. What's the best set of media queries, that I can perform in two different queries, just for mobile and other platform, that take in account a phone being landscape or portrait? I don't want to have to repeat my CSS code through multiple media queries because of phones going landscape and such. I just want the mobile version to be active whether a mobile is landscape or portrait.
Thanks
That's nothing a quick google search couldn't have revealed to you: (first try) https://css-tricks.com/logic-in-media-queries/
media-query logic:
And: and
Or: ,
Not: not
In your case, your CSS would look like:
#media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
only screen and (max-device-width: 1024px) and (orientation: portrait) {
/* your css here */
}
Just some reminders:
Your media-query do not serve the situations "portrait and device-width < 768px" and "device-width > 1024px". You need to address those cases too somehow.
While an iPad (in ladnscape) has a screen-width of 1024px, you would present your websites desktop view to any other phones/tablets having a width of at least 768px, too. I don't think that's a good idea. But I don't know what your website looks like, so I assume you know what you're doing.
BTW: Wouldn't a grid-system like bootstrap do a lot for you?
When I simulate with Google Chrome inspector choosing the Galaxy S5 (360px), I am having problems detecting the proper screen width. It omits the CSS for the 360px and uses the 768px CSS instead. Is there a better way around this?
#media only screen and (max-device-width: 360px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:290px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
#media only screen and (max-device-width: 768px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:370px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
Just change the order or reverse of your media query. Write first 768 media query then 360.
you can add meta to your header.
<meta name="viewport" content="width=device-width">
you can also refer to this link for full details
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
I am having a strange problem with my media queries. They seem to be working just fine on my mobile devices, but when I resize my desktop browser the changes are not applied. This makes using web inspector/firebug impossible to inspect my mobile styles. Here is my media query:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
You are calling device specific queries. If you want to test on browser window resize, you need to remove -device- from both min and max calls.
#media only screen
and (min-width: 320px)
and (max-width: 480px) {}
I am looking to add some responsive web design to my site for iPad Portrait. I have my main css file (style.css) and then i have added the line below:
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
However when i try to set a div's background colour to red or something then resize the window i cannot see any change when it gets to the iPad Portrait size.
The stylesheet im linking to looks like:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
.myTile{background:red;}
}
I have tried it with and without this and no difference when i resize.
What am I doing wrong?
Any help would be great, I am just picking up responsive design.
Thanks
I would use:
#media screen and (max-width: 768px) {
/*styles*/
}
I also use max-width. What's the difference between max-width vs max-device-width? The difference, max-device-width only affects those devices that have a max width of XYZpx, so re-sizing a browser window on your desktop would yield no styling changes in relation to that particular media query. max-width, will yield styling changes on any device/browser that fits the media query. So re-sizing your your desktop browser and having the media query use max-width, you'd see the website as someone using an iPad would.
this is a great reference: Responsive Web Design