I'm looking for the correct CSS media query to target all phones (not tablets and larger) including 1080 phones such as the Sony Xperia Z.
Right now I'm using:
<link href='style/mobile.css' rel='stylesheet' type='text/css' media='screen and (max-device-width: 767px)' />
That works for most devices, but in the Android Firefox Browser (not Chrome though strangely) the Xperia Z just gets the desktop site only.
I've tried searching but it seems no one is talking about these new very high-res phones, is there a new standard I should be adhering to?
Use max-width instead of max-device-width to target CSS pixels.
Do not forget viewport meta. Small devices with lots of pixel will still have a low CSS pixel count so it will just work.
You can combine the width with resolution in your media query.
#media screen and (max-device-width: 767px) and (min-resolution: 300dpi) { … }
I don't think you'll find what you need in media queries. Phones and tablets have a big crossover in resolutions.
Here are the media features you can query according to the w3c...
http://www.w3.org/TR/css3-mediaqueries/#media1
... none seem to be what you're looking for.
Unfortunately I don't know if a great way to deal with this, even the user-agent is of little help.
Related
I am trying to write a functionality enabling users to switch between mobile and desktop layout. I am using media query for differentiation of the layouts:
#media screen and (max-width: 1024px) {
.... some definitions
}
My understanding is, VIEWPORT META tag should affect the media query. So, I think this
<meta name="viewport" content="width=640" />
should cause positive evaluation of my condition
#media screen and (max-width: 1024px)
Unfortunately, it doesn't. Am I wrong? If yes, is there a way, how to affect the media query?
My understanding is, VIEWPORT META tag should affect the media query.
Only in browsers that support it. Desktop browsers generally do not.
If you want to allow Desktop browsers to use CSS you normally only want for smaller screens, then your best bet is to use two separate <link> elements and use the media attribute to specify your media queries. Then use JavaScript to change the media queries to match the display (instead of the display to match the media queries).
I have a phonegap based html app that I'd like to show on both desktop/ipad and mobile.
I was looking into media-queries but it seems pretty cumbersome that I need to specify min/max px. and do a separate media query for each type of mobile so for example iphone4, iphone5, iphone6, iphone6plus, etc because they have different sized screens.
What I want basically is to set up a css where I say, "for all mobile devices in landscape do this", and "for all mobile devices in portrait do this". I don't want to get into specifics about WHICH type of mobile device it is or fiddle around with specific screen dimensions. I don't even want the word "px" to appear in my media query basically.
Similarly I want to know if it's a tablet portrait/landscape.
And if it's a desktop.
Is there an easy way to do this with media queries?
You're correct in not wanting to create different layouts for every specific mobile device, as it will be an ever increasing list of devices it isn't robust at all. However making the distinction between desktop and mobile also isn't easy. Just think about the screen resolution of a tablet versus a netbook pc, they are almost alike.
In my opinion the best way to design your breakpoints is to start with a mobile view and to keep expanding the screen size until you think that the design doesn't work anymore. At that point you should include a breakpoint and update your design (perhaps add a sidebar, show an expanded menu etc).
So unfortunately I think that there isn't an easy way to distinguish between mobile an desktop devices, the only easy option would be to find a pixel based breakpoint (bootstrap uses 992px) from which your desktop design should apply.
To make the distinction between portrait and landscape mode you can use #media screen and (orientation: portrait) and #media screen and (orientation: landscape).
For example you could use something like this:
.container {
/* mobile devices */
}
#media screen and (orientation: landscape) {
/* mobile devices in landscape */
}
#media screen and (orientation: landscape) and (min-width: 992px) {
/* desktop devices */
}
Unfortunately mobile phones have such high screen resolutions that my website comes it far to small. It adapts perfectly when zoomed in on a desktop browser but unfortunately on mobile browser the webpage viewport size does not actually change once zoomed. To try and solve this I have already gotten a script that detects a mobile user agent and then sets the body width to 500px, this looks about the perfect width but unfortunately the mobile browser does not set its viewport to 500 even after I set the meta for viewport 500 and this results in my webpage rendering in the corner of the browser. Once zoomed in it looks fine though but that is not what I want. My site is in some way similar to nokia.com and I want it to behave in the same way on a mobile client.
Can someone please tell me what the correct procedure is for doing something like this because I am in no way a proper web developer, I am just doing this to learn.
Here is my meta:
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
You need to write conditional CSS rules for smaller browser sizes.
One example:
#media screen and (min-width: 768px) {
.item1{}
.item2{}
}
Here is a site I just found through a quick google search that should be able to get you started at least. http://www.conditional-css.com/usage
Good luck with your learning!
It is better to use #media queries (available is css3)
Something like:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
Try this
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
and use the media query to target all the screen size
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
Hope this helps you
Finally solved it! It seems the reason I was having so much trouble is because the mobile device I was testing in was a Windows Phone 8 device and apparently WP8 does not really respond well to the viewport meta tag. This is easily solved by the addition of a MobileOptimized meta tag.
So far I was only able to find following media query:
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
However it seems it only supports webkit browsers, is there a similar query for (at least)
-moz- and -ms- (-o-) browsers?
What you can do instead of detecting device-pixel-ratio or min-resolution, you can detect the device width which is the resolution of the screen size instead of the viewport width which is the resolution of the browser size. This first of all gives you a correct media query when attempting to target specific devices, and to detect "retina" device you will need to use:
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
/* code goes here */
}
This sets up the media query to identify devices that are scaled like retina displays on iDevices and helps target them only to avoid other devices receiving these css styles.
Let me know if that works for you.
There is no such thing as a retina display. I have a MacBookPro with what Apple labels as "retina" (so I understand what it is you think you mean), but the word is completely made-up and really means nothing.
So, you won't be able to detect it as much as you won't be able to detect a "high performing gaming computer", which is as strictly defined.
I'm currently annoyed by my media queries to target smartphones. It's the first time I use media queries.
I've done a tablet version (768px) of a website, and a phone version (320px).
Note that theses screenshots are actually Firefox screenshots.
As you can see, these displays work fine when I resize my window on Firefox, IE, Webkit.
However, the display is wrong on my iPhone 3G and my Xperia X8.
Here are the results (left iPhone, right Xperia) :
As far as I know, both phones have a 480*320 pixels resolution.
So, why such results?
On the iPhone screen, the light brown rectangle on the header is supposed to be 300px width. Why is it so small?
And why is the tablet version loaded on the Xperia ?
I use these media queries on my CSS :
/* Tablets ----------- */
#media (min-width: 768px) and (max-width:1023px)
/* Phones */
#media (min-device-width: 320px) and (max-device-width:767px),
(min-width: 320px) and (max-width:767px)
I hope you'll can help me, I'm stuck on this issue since too much days.
Have you setup a proper viewport? Like:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
Put that in your head tag.
Use proper media Queries to ensure the perfect rendering and responsiveness for smart phones and cross platforms. here is the link you can learn how to use media queries in right way. css tricks