I've noticed that the CSS on mobile devices needs some fixing, and I was wondering whether it's possible to target CSS for Chrome on Android?
i know android use different densities: low, medium and high. You can target each of these very easily with the following media queries
#media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
#media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
#media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
And you can target Safari and Chrome with
#media screen and (-webkit-min-device-pixel-ratio:0)
Hope this helps
Related
I am currently designing a site for my brother using Joomla 3.4 and Bootstrap. This is the first time I will be building a responsive site and wanted some advise on what to make sure I have within my CSS i.e. font sizes in particular units.
I am aware that I will need to use media queries to target each viewport, but one thing that confuses me is trying to workout what sizes would sit well for a smartphone, not sure if theres a guide list to follow to help me out.
If somebody could please advise, would really appreciate it.
Since you're using Bootstrap, you should use its Grid System
/* Extra small devices (phones, less than 768px) / / No media query
since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ #media (min-width:
#screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */ #media (min-width:
#screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */ #media (min-width:
#screen-lg-min) { ... }
and here is the link you can check more on.
I am not getting how to write bootstrap media query for 768*1024 and larger devices. I know I can use #media then screen size{}, but I have write css for each and every tag button and rest elements? Is there any shortcut way? If I have to write then how can I write. Please someone provide me, sample code for bootstrap #media query to make my app responsive in tablet like devices.
Thanks in advance.
...depending on the size of the device there are many classes that help you achieve what you want in specific resolutions.
First of all in the customizer of bootstrap before downloading you can set your own breakpoints, then depending on the class you can use -xs- -sm- -md- -lg- along with the class you want to use it just for the specific resolutions.
For example:
using class 'visible-xs-block' means that this class that applies the display:block style, will only appear in XS devices - this depends of if you have custom breakpoints or using the default which is for devices up to 767px
edit: if you were using the class 'visible-lg-block' instead would mean that the class would only be applied for large devices (≥1200px).
Of course you can mix and match which classes you want, you can use both of these classes on the same element like:
<div class="visible-xs-block visible-lg-block">
..that would make the element visible only on xs and lg devices.
You can learn the functions/etc by using the help online;
http://getbootstrap.com/css/
Bootstrap is already responsive for tablets and phones as long as you use their grid system (try viewing the main Bootstrap site in such a device for examples). You'd only need media queries if you wanted to override or extend its default responsive behaviour.
Sudarashan I think if I read your further comments right, that you have an issue with specifically the 768px width screen size upto 1024px.
This code (taken from the Bootstrap site) shows the standard breakpoints at which bootstrap operates.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Your initial question mentions that you are looking to respond between 768px and 1024px. This would start responding within the parameters of sm (small) 768px
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
BUT, would then run into the md (medium) parameter 992px (and above) all the way up to the desired 1024px that you are aiming for.
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
The solution
In this case you might be as well writing a new media query confined to the parameters you require here. From my understanding that would be as follows:
/* Custom sizes (768px to 1024px) */
#media (min-width: 768px) and (max-width: 1024px) {... }
This should provide the required breakpoint that fits your app I believe.
I have a background image that looks fine in windows operating system but it looks cloudy and stretched in retina ready devices. Now I want to replace the background with a high resolution image in retina ready devices.
What is the best way to implement that? Either media queries or using javascript or anything else?
You can generally target high DPI (Dots Per Inch) displays using Media queries like this:
#media only screen and (min-device-pixel-ratio: 2) {
/* high-DPI stuff here */
}
Just be aware that this will target anything that meets the ratio requirement.
If you want to target Retina displays specifically, you'd need to add something to make the media query more specific. Here's how Chris Coyier does it:
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
All these different targeting methods have different levels of support, so it's useful to know a few.
There may already be several devices that meet these conditions, so you could target it another way by using extra conditions to make it even more specific.
For example, to target the Retina iPhone 5/5S/5C for example, you could use this:
#media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) {
/* Retina-specific stuff here */
}
#media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) {
/* Retina-specific stuff here */
}
But as always, it's not recommended to target specific devices, it's a never-ending workload.
I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)
/* Normal styles go here */
#media screen and (min-device-width:321px)
{
/* Styles */
}
#media screen and (min-width:701px)
{
/* Styles */
}
#media screen and (min-width:1025px)
{
/* Styles */
}
#media screen and (min-width:2049px)
{
/* Styles */
}
However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)
The Hicks design site's rules are very similar to mine, however they make use of min and max but either for me doesn't seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).
If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers...
I have tried the following following to get around the issue:
#media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
also:
#media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
However I don't think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can't get it to work.
From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. - I'm confused why max-width doesn't seem to read the mobile's browser width.
I think I'm possibly missing something obvious about media queries here... It doesn't seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from 'screen and (max-width)' to 'screen and (max-device-width)' or vice versa. (which I'm ashamed to even type as a workaround here)
How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?
If you'd rather not read all of the above:
I am using #media screen and (max-width:480px) however it seems only #media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:
#media all and (max-width:480px)
{
/* Styles */
}
Edit:
Combine rules with or:
#media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}
Combine rules with and:
#media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}
#media screen and (min-width:240px) and (max-width:480px),
screen and (min-device-width:240px) and (max-device-width:480px)
{
/* Styles */
}
Resolved the issue, previous answers helped me so voted up. Thanks.
What is the advatange of using Head.js screen size detection over CSS3 media query?
Head.js Screen size detection
.lt-1024 #hero { background-image:(medium.jpg); }
CSS3 #media query
#media only screen and (max-width: 1024px) {
#hero { background-image:(medium.jpg); }
}
If it's just a matter of CSS vs JS choice, which one is more trustworthy for mobile design?
CSS media queries are not supported by all mobile browsers (see Browser compatibility – viewports). That’s why it could help to have another indicator.
But you can not only use this for mobile web sites but also for web site for desktop web browsers.