I am working on my own website with self-made media-queries.
DEMO: JSFIDDLE
IMAGE EXAMPLE (mobile screen)
As you can see it works fine on deskopt, but I dont know why on mobile displays high resolution .
Any clue?
MEDIA QUERIES USED:
#media only screen and (max-height: 700px) {}
#media only screen and (max-width: 1023px) {}
#media only screen and (max-width: 880px) {}
#media only screen and (max-width: 700px) {}
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Note: Yes, I know I am not following the standars, but shouldn't be the problem (sure?)
It's a shame to me say this, but the problem was on the mediaqueries sintaxis.
I just forgot the ending tag "}", so modern browsers understands where it ends, but not the mobile ones.
Related
I have been struggling with the iPad portrait view of a post grid on my site. The grid looks fine in all other view except for this one, where the grid appears on the far right-hand side of the container.
The theme's (Alexandra) CSS is as follows:
#media only screen and (max-width: 941px) and (min-width: 768px).container {width: 726px;}
I've tried to modify this by using:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) .container {width:510px;}
And:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {width:510px !important;}}
Also:
#media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {margin-right: 200px;}
As well as several other configurarions and nothing happens. Any ideas on what I'm missing or why this isn't working or changing anything? Thank you so much for reading! Any insight is greatly appreciated!
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
So you should add to index.html this meta:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I've got my visitor portal setup for 3 types of devices: mobile (less than 800px width), low-res desktop and hi-res desktop, like this:
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." type="text/css">
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
All this works rather well but with the iPad Pro portrait, the width of the screen is less than 800px but the stylesheet that's selected is the low-res desktop. What do I need to change to make it work?
Edit (to clarify the problem)
When I do something like this
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
<link media ="only screen and (max-width: 800px),
only screen and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:portrait),
only screen and (max-device-height:1366px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:landscape)"
href="..." rel ="stylesheet" type="text/css">
The problem is that the styles get mixed-up at different resolutions. I'm looking to make it work so that only one stylesheet is active at anytime.
iPad Media Queries
iPad Media Queries (All generations - including iPad mini)
iPad in portrait & landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
To know more about device media queries, please visit Stephen.io/mediaqueries
Source credits to http://stephen.io/mediaqueries/
Hope this may help you.
Thank you
So, if i were you, I will do something like this:
<!-- small devices non-retina (apple use 2x for ipads and 3x for the newest iphones) -->
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
<!-- small devices retina (apple use 2x and 3x) -->
<link
media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 800px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min-resolution: 192dpi) and (max-width: 800px),
only screen and (min-resolution: 2dppx) and (max-width: 800px)"
href="..." rel="stylesheet" type="text/css">
<!-- bigger devices low-res -->
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<!-- bigger devices higher res -->
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
If you see in this article of CSS Tricks: Media Queries for Standard Devices you can go very specific trying to point each devices. Or get use of some of this examples (maybe in combination with orientation: portrait)
Lastly I'll like to say that, personally, I only use the -webkit-min-device-pixel-ratio: 2 or -webkit-min-device-pixel-ratio: 3 to point to the high-res raster/bitmap images (jpg and png) I'll use.
I hope this help.
You can find more info about 2x and 3x devices and how this affects images on this article from Apple.
Other resources:
MDN Media Queries.
Already mentioned by another answer (CSS Tricks): Retina Display Media Query.
Already mentioned by myself, also CSS Tricks: Media Queries for Standard Devices
A comparative of devices and screens: A quick reference for iOS devices
More official sources:
W3C Recommendation 19 June 2012 - Media Queries - Resolution
Apple's Safari Web Content Guide - Optimizing Web Content
Android's Supporting Multiple Screens
iPad pro has a retina display, with a pixel aspect ratio of probably 2, which makes virtually 2 x 800 = 1600 pixels. That's why the selected media query is the wrong one. You'll have to deal with pixel aspect ratio too. See this : https://css-tricks.com/snippets/css/retina-display-media-query/
This Query working on all device I hope your issue is resolve.
#media only screen and (max-width:767px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:red;
}
}/*===========Mobile Device=============*/
#media only screen and (min-width:768px) and (max-width:1280px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:green;
}
}/*===========Tab and IPad Pro Device=============*/
#media only screen and (min-width:1280px) {
.big-dot{
width:280px; height:280px; margin:0 auto; background:cyan;
}
}/*===========Large Desktop Device=============*/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="big-dot">
Time Big Dot /.....
</div>
</body>
</html>
have you included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>? I find including this makes retina devices behave as expected without any extra fiddling with 2x and 3x devices mentioned by f-spin
edit: just beware, you may find this affects layout that currently works well, but overall should make media queries more predictable once you've got over that (probably quite small) hump
As per my knowledge resolution of iPad Pro is (1024x1366)px and iPad Pro9.7 is (768x1024)px. So if you want to load specific stylesheet for specific resolution, then you might be load the stylesheet of
<link media="only screen and (min-width: 768px) and (max-width: 1199px)" href="..." rel="stylesheet" type="text/css">
I think this will help you.
This Query working on all device I hope your issue is resolve.
/*---------------------------------------------------------------------
Large Desktops
-----------------------------------------------------------------------*/
#media only screen and (min-width: 992px) and (max-width: 1200px) {
}
/*---------------------------------------------------------------------
Desktops
----------------------------------------------------------------------*/
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*---------------------------------------------------------------------
Tablets Devices
-----------------------------------------------------------------------*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*----------------------------------------------------------------------
Mobile Devices
------------------------------------------------------------------------*/
#media only screen and (min-width: 360px) and (max-width: 479px) {
}
/*----------------------------------------------------------------------
Small Screen Mobile Devices
-----------------------------------------------------------------------*/
#media only screen and (min-width: 320px) and (max-width: 359px) {
}
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) {}