I have a bunch of media queries that load a different background image depending on the width of the screen. For some reason my One plus 2, with a screen width of 1080 in portrait is triggering the (max-width: 400px) clause. Why?
I suspect it is something to do with pixel density. If this is the case, is there a list somewhere of the most common screen sizes when taking pixel density into account?
#media screen and (max-width: 1080px) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
#media screen and (max-width: 800px) {
.mainImage {
background-image: url('shop-home-vertical-800.jpg');
}
}
#media screen and (max-width: 600px) {
.mainImage {
background-image: url('shop-home-vertical-600.jpg');
}
}
#media screen and (max-width: 400px) {
.mainImage {
background-image: url('shop-home-vertical-400.jpg');
}
}
Edit:
The viewport I have is:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.
It looks like it could be a problem forgetting to set a viewport. Try including this into your head <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
This is caused by the device pixel ratio, which down scales the actual device ratio.
Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)
The following allows me to target the one plus two accurately.
#media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.
Just discovered that dppx is not well supported yet. This won't work on safari.
Related
I have searched and searched and I can not seem to find a reason why my html meta tag is not working on my iPhone. You can visit my website at http://hadenhiles.mooo.com. If you resize the viewport (window) you will see that my site responds totally as expected... however when you view it on a mobile device you get a result that looks as though it is a desktop version. here is the head tag and it's contents:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
As you likely have noticed I use my own stylesheet as well as the bootstrap3 stylesheet. I know I should likely stick to one or the other when it comes to layout but I made this website using only my own media queries before I was introduced to bootstrap. I only use bootstrap in the footer and for popups/navbar features. Anyway bootstrap is not the issue. It seems as though the meta tag is not recognizing the device width and is not setting the initial scale to 1.0. I have tried varying the min-width of my queries to debug but had no success. Here is are my css media queries:
/* Main css */
#media only screen and (min-width: 1px) and (max-width: 320px){
/* content */
}
#media only screen and (min-width: 321px) and (max-width: 600px){
/* content */
}
#media only screen and (min-width: 601px) and (max-width: 768px){
/* content */
}
#media only screen and (min-width: 769px) and (max-width: 1020px){
/* content */
}
I have tried switching from #media only screen and to #media screen as someone suggested in another question but had no success either. At first I thought that the min/max width was too big/small for mobile devices so I changed that and nothing happened. I have had this problem for about 3 months now so I decided to publish my own question. Any help you can give me is much appreciated.
~Haden
So this isn't exactly defining what's going on, although I do think that it is due to min and max conflicts. Try setting only max-width since that seems to be covering everything. It seems redundant to say min-width is 1px and max width is 320px and then for the next media query to be 321px. If you set the max-width to 320px, it will cover that range. If you set the next one to 600 pixels, it will cover the 320-600 range, etc.
#media only screen and (max-width: 320px){
/* content */
}
#media only screen and (max-width: 600px){
/* content */
}
#media only screen and (max-width: 768px){
/* content */
}
#media only screen and (max-width: 1020px){
/* content */
}
Alternatively, you might try using min-device-width and max-device-width. Here's a link to a decent resource on media queries for standard devices.
I'm testing a website I'm developing and am using media queries.
When I test and resize the page in a browser, everything is good.
But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.
If I load the page in landscape mode, the correct CSS are applied.
When I change to portrait, the CSS are also correct.
But if I go back to landscape, the portrait css classes are still being applied.
I'm using these metatags
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And in my media queries I have
#media
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }
#media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
I've alerted the device width to make sure it's ok and in landscape mode it's 598px wide and portrait is 384px
I'm using a Nexus 4 (Android 4.3)
How come the CSS aren't applied once I change back the orientation?
EDIT:
If I load the site in portrait and then change to landscape, the CSS aren't applied.
It's as if once it goes to the smallest resolution, it can't go back.
On my Nexus 4, I have something that looks like this and seems to work for your test cases:
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>
And I make no reference to orientation in the media query, for example:
#media only screen and (max-width: 610px) { /* Some CSS here */ }
EDIT: Looks like you have to put max-device-width after the other max-width stuff in terms of the media queries. To quote vyx.ca in the comments below...
Just found my problem. Notice how I define 'max-device-width' before the rest. If I put that condition last, it works. 'max-device-width' is used for retina display.
My problem is related to the order of my CSS requests.
I used to define 'min-device-width' before the rest.
#media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
But if I define it last, it works.
#media
only screen and (min-width: 240px) and (max-width: 520px),
only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }
For more information about device-width:- check out this question
Well-known quiksmode site defines device-width / device-height media features as static.
These media queries are static once determined; i.e. they do not update the value they’re checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)
That's why using max-device-width is still applied after changing orientation.
this code worked for me:-
#media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
body
{
background:#009;
}
}
#media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
body
{
background:#993;
}
}
Your media queries have overlap. Max-width of 520 will also be true of max-width 610. Also you have an OR in the landscape so it's possible to be true in Portrait if max-width 610 is true. Overlapping media queries will work like CSS in that it cascades so you'll get odd behavior.
I don't see any reference to orientation:portrait in your queries so how do you know portrait classes are being applied. You typically want to make it an either or when doing orientation queries.
Also try adding min-width to remove any width overlap
#media only screen and (orientation:landscape) { ... }
#media only screen and (orientation:portrait) { ... }
I'm trying to use media-queries in my CSS for the first time, but I don't seem to be having much luck getting it to work.
To test, I wanted my #page-wrap to resize to 440px when something like an iPhone is looking at the page, but nothing changes.
This is what I've used.
#media only screen and (max-device-width: 480px) {
#page-wrap {width:440px;}
}
I also put this in my header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Is this correct?
Is there a specific reason you're using max-device-width? Unlike max-width, it will not help with people rotating their device or other types of adjustments.
Instead, stick to using max-width, like the following:
#media only screen and (max-width: 300px) {
#page-wrap {
width:100px;
}
}
Check out this jsFiddle that illustrates it.
Try this for your media query:
#media only screen and (max-width: 480px) {}
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!
Are the same methods used to write CSS only for iPhone in landscape mode?
Yes, sure. Check: http://www.w3.org/TR/css3-mediaqueries/#orientation
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
If you want to target iphone only you have to add the resolution or the dppx density to these MQ.
You could do this
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
That forces the iPhone to render viewport the same as the device width.
Then use this css to target the landscape mode, which is +320px wide
#media screen and (min-width: 321px){
//styles
}
If I understand you correctly, and you want to know the media queries to target a smartphone like the iPhone only when it is held horizontally, try something like this:
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
actually if you use :
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
then you prevent user to zoom at any time, which can cause usability problems.
I would recommand you to use :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In this case, you force your page to be displayed at it's original initial scale, and so then you can target different layout sizes with your media queries, as the layout will be resized when you will rotate your iPhone :
#media only screen and (min-width: 480px) {
/* landscape mode */
}
#media only screen and (max-width: 479px) {
/* portrait mode */
}
And the user can still pinch the page to zoom.