I have this #media setup:
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
With this setup it works on the iPhone but it does not work in the browser.
Is it because I already have device in the meta, and maybe have max-width:480px instead?
I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read #media. When I use #media, I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
#media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your #media. This is just an example of what I've found best for me when building styles for all browsers.
iPad CSS specifications.
Also! If you're looking for printability you can use #media print{}.
The underlying issue is using max-device-width vs plain old max-width.
Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
If website on small devices behavior like desktop screen then you have to put this meta tag into header before
<meta name="viewport" content="width=device-width, initial-scale=1">
For media queries you can set this as
this will cover your all mobile/cellphone widths
#media only screen and (min-width: 200px) and (max-width: 767px) {
//Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
}
For iPad and iPad pro you have to use
#media only screen and (min-width: 768px) and (max-width: 1024px) {
//Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //
}
If you want to add css for Landscape mode you can add this
and (orientation : landscape)
#media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
//Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}
The correct value for the content attribute should include initial-scale instead:
<meta name="viewport" content="width=device-width, initial-scale=1">
^^^^^^^^^^^^^^^
If you want to include both min and max width for responsiveness in the browser, then you can use the following:
#media (min-width: 768px) and (max-width: 992px){...}
#media (min-width: 480px) and (max-width: 767px) {...}
for some iPhone you have to put your viewport like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
Related
I have written this media query for Macbook Pro. It is not accepting the media query. My Macbook's resolution is 1280x800 13 inches
#media only screen
and (min-device-width : 1280px)
and (max-device-width : 800px)
{
.col-md-12.webtestingsocial
{
margin-left: 29px !important;
}
}
It should work this way:
#media screen and (min-width: 800px) and (max-width: 1200px) {
/* Your Styles */
}
Also make sure you have this tag inside the HEAD
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's because making your min-device-width value higher than your max-device-width makes it invalid.
Have you tried making the min-device-width 800px and max-device-width 1200px?
Media Query for macbook 13 inches(1280*800)
#media screen and (min-width: 800px) and (max-width: 1281px)
{
//write your styles here
}
I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.
The default code for division is:
.top_bar {
height: 9%;
}
Now using Media Queries aspect ratio:
#media screen and (min-device-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
But this is not working, not on browser and not on device.
I have added viewport metatag content value as
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"
Later I tried multiple resolutions to detect aspect ratio as:
#media
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{
.top_bar {
height: 7.5%;
}
}
But this isn't working either.
UPDATE - FIXED
Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16
and its working fine now.
#media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
put Your meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1">
And write Your Media queries
#media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}
maybe this is simple but I havent found the answer yet
How do I detect either iphone, ipad, ipad, android phone in any mode via CSS?
I read this
Detect iPhone/iPad purely by css
that describes how to detect all the specific devices
But what I am looking for is to distinguish between desktop/laptop AND all ipad/ipod/iphone/android devices in general
Here are my notes on the matter: For any device - do your research on it's screen sizes and ratios and then do a #media query in your stylesheet for each device.
iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
(portrait or landscape) on the iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Mobile Phones Portrait
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
Mobile Phones Landscape
#media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
Mobile Phones Portrait or Landscape
#media screen and (max-device-width: 640px){
/* some CSS here */
}
iPhone 4+ Portrait or Landscape
#media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
iPhone 5 Only
#media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (- webkit-min-device-pixel-ratio: 2) {
/* styles here */
}
iPhone < 5: aspect ratio
#media screen and (device-aspect-ratio: 2/3) {}
Tablets Portrait or Landscape
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
Desktops
#media screen and (min-width: 1024px){
/* some CSS here */
}
Styles only between two sizes.
#media screen and (min-width: 319px) and (max-width: 1281px){}
BTDUBS - Did you know that WordPress has an is_iphone() global built in?
global $is_iphone;
if ( $is_iphone ) {
// do something if $is_iphone is true
}
you could use #media queries to solve your problem, the below maybe something you could try. You can also you device orientation as a setting to target your devices or set your max width like below and then write your css. Hope this helps.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
I need to write different styles in following cases
Device width greater than device height
/* Landscape */
#media screen and (orientation:landscape) {
.bg img {
height: auto;
width: 100%;
}
}
Device height greater than device width
/* Portrait */
#media screen and (orientation:portrait) {
.bg img {
height: 100%;
width: auto;
}
}
Orientation doesn't work perfectly in some stages on resizing the browser.
How to write correct CSS?
Is it possible to do so with CSS?
EDIT :
I am attaching image how it looks on resizing the browser
You have access to the browser's aspect ratio with these media query features: aspect-ratio | min-aspect-ratio | max-aspect-ratio. For more info, check out CSS media queries on MDN.
Portrait has an aspect ratio greater than 1:1 and landscape is less. To verify, I made a JSFiddle that changes color when you switch from "landscape" to "portrait".
Try this:
/* Landscape (i.e. wide viewport) */
#media screen and (min-aspect-ratio: 1/1) {
.bg img {
height: auto;
width: 100%;
}
}
/* Portrait (i.e. narrow viewport) */
#media screen and (max-aspect-ratio: 1/1) {
.bg img {
height: 100%;
width: auto;
}
}
Update: The image is part of the flow of the document, and won't fill the viewport unless the body also fills the viewport with body {height: 100%;}, as in this JSFiddle.
Try img {position: absolute;} to pull the image out of the flow, so it's dimensions aren't constrained by the body's size. See JSFiddle.
The problem that you were having was that you were relying on the text "orientation:landscape" which is not recognised by browsers. Use the code below which check the height and width of a device to calculate its orientation. Credit to css-tricks.com who can really help with media queries, here is an example of the most common uses of media queries.
/* 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 */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Source http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I have a similar need but I was using:
<link rel='stylesheet' media='screen and (max-aspect-ratio: 4/3)' href='css/tall.css' />
<link rel='stylesheet' media='screen and (min-aspect-ratio: 4/3)' href='css/wide.css' />
The only problem was, when I hit 768 x 1024 it displayed correctly, but when I went to 1024 x 768, I got a blank page. I was using a simple css display assignment like:
display:none;
to turn the div on or off, which works but my question is how can you make a continuos flow without that break? at 1024 x 768
I am using this right now:
<link rel='stylesheet' media='screen and (orientation:portrait)' href='css/tall.css' />
<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/wide.css' />
I would like to use max-aspect-ratio and what not, because that gives me more control over when change happens. I mean I can't put 1.333 ratio and 1.334 bummer...
--NEW UPDATE
<!-- tall -->
<link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:0px) and (max-width:1023px)' href='css/tall.css'/>
<!-- tall -->
<link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:1025px) and (max-width:9999px)' href='css/tall.css'/>
<!-- wide -->
<link rel='stylesheet' media='screen and (min-aspect-ratio:4/3)' href='css/wide.css'/>
I guess I fixed my problem by doing the above code, which is disappointing. But it works so far, I am just going to have to test for almost every screen to make sure higher resolutions that are EXACTLY 4:3 by the Query "terms" still show. I tried 2048 x 1536 iPad3 Retina and that shows up, don't know why 1024 x 768 fails... but is working with the fix above.
----UPDATE 2 (I hate to be a pain but)
This seems to be the cleanest solution for aspect-ratio:4/3 :
<!-- tall 1.33301 -->
<link rel='stylesheet' media='screen and (max-aspect-ratio:4095/3072)' href='css/tall.css'/>
<!-- wide 1.33333 -->
<link rel='stylesheet' media='screen and (min-aspect-ratio:4096/3072)' href='css/wide.css'/>
here is my meta for the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
and this is my css:
/* ---------- */
/* iPad 3 */
/* ---------- */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: landscape) {
body { background: red; }
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {
body { background: orange; }
}
/* ------------ */
/* iPhone 4 */
/* ------------ */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: landscape) {
body { background: blue; }
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: portrait) {
body { background: gray; }
}
why iPad3's css overwrite the iPhone4's one?
Do you have CSS outside of these queries?
Your issue is that your iPhone queries have min-device-width:640px but an iPhone (even the 4) is 320px wide [with a scale of 2, yielding 640 points of usable space], so those queries are not being applied (but neither should the iPad ones, which is why I'm asking if there is additional CSS outside of the queries)
Try to change the order of device specific css(e.g. take iPhone css above iPad css). I have no idea it will solve your problem. But, i have seen this in HTML5 boilerplate template. An d i have read it somewhere that we should always write css code for small devices first.