I have an issue with my crossbrowser/cross-resolution CSS, so I had a look into media queries, and one of the issues is that WebKit based browsers seem to render the height differently to Gecko based browsers for some reason. (To be honest, this is probably to do with my terrible CSS skills)
Along side that, the WebKit browsers seem to render the height the same as what is required by a 1366x768 resolution.
So my question is: Is there a way of doing a media query just for webkit browsers AND a specific resolution?
Thanks!
Yes, you can write something like
#media screen and (min-device-pixel-ratio: 1.5) and (max-width: 480px) {...}
You can read about it here http://menacingcloud.com/?c=highPixelDensityDisplays
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 am not good at responsive stuff, i designed my site for high resulation , so when i try to use it low resulation its looks bad, i fixed it for google chrome with:
body {
zoom: 80%;
}
But still looks bad for ie and mozilla , i try "transform" and "scale" stuff but they didnt work out, they zoom out like you zooming picture, they didnt reflow pages.. I need something that works like browser zoom property.
Thank You
There are several ways to accommodate Mobile/Tablet devices with your website.
FIXED DESIGN
Create a stylesheet that works generically across all formats. Your site will appear the same on all devices but this process will be the simplest solution.
The fixed design process should primarily use percentages and max-widths to create content that changes based on the device width.
PROS
When used well this process uses least resources and is faster to create and modify.
CONS
If your site has large amounts of content on a page then your site can become very cramped on smaller devices
RESPONSIVE DESIGN
If you want your site to be viewed differently and arguably optimally on different devices then you need a responsive design. This can be achieve by using a dynamic stylesheet or by using multiple stylesheets for different devices.
PROS
A very versatile website that can be display uniquely and optimally based on the viewing device.
CONS
Larger or additional resources and marginally longer loading depending on design. Longer development and modification times.
CREATING RESPONSIVE CASCADING STYLESHEETS
It is no longer practical to use set width becuase there are simple to many varible sizes.
The answer is flexible everything.
Using a viewport metatag as in your example to target the device
that is accessing your website.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites.
Using media queries.
Media Queries let you write individual rules for specific screen widths.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
Using Javascript.
A good javascript solution other than bootstrap is jquery mobile which takes away the time and effort of designing a responsive site by doing the work for you.
You do not need to know or edit any javascript to use it.
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.
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 have had a look around but need a more concise answer to this question.
I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:
CSS resets (everything to use)
The normal desktop 'screen'. (only desktop computers)
Printing 'print' (only printing)
The iPhone/handheld (only handheld)
IE6 stylesheet (only IE6)
So my question is: Am I right to think the right way to control this would be..
set the media="all" for the resets.css
set the media="screen" for the
desktop.css
use conditional comments 'here' for
legacy browsers.
set the media="print" for printing.css
use css3 media queries such as :
#media only screen and
(min-device-width: 320px) and
(max-device-width: 480px){ }
has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?
It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:
http://stuffandnonsense.co.uk/projects/320andup/
You can learn a lot just by looking at how these guys developed their boilerplate.
And, to see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.