I am new with using media queries.
I am working on a website which I want it to be correctly displayed on Ipad.
I have tried this,
//css use for Ipad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.overlayBox{
width:200px;
}
}
// css use for Window
.overlayBox{
width:450px;
}
But i am having problem that media queries doesn't work for Ipad. It takes window css.
Am I doing something wrong?
Use device-width and device-height to target specific devices, then use orientation to target portrait or landscape.
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.myrules {
width: 200px;
}
}
Related
When I use this code(see below) the media query does not work
#media (min-width: 768px) and (orientation : portrait) { //scss code }
But when I remove the 'and (orientation : portrait)' part it works. i.e
//this code works
#media (min-width: 768px) { //scss code }
How can I set up media queries for Ipads and Tablets for portrait and landscape orientations in CSS?
PS: I am coding a responsive layout for the web and I am using scss mixins (don't know if that affects anything.)
try this code
#media screen and (min-width: 768px) and (max-width: 992px) {
/* STYLES HERE */
}
Been doing media Queries for Iframe. This two media queries below works fine for iframe when editing the Height and width
min-device-width: 768px) and(max-device-width: 1024px)
min-device-width: 600px) and (max-device-width: 960px)
However when queries on htc phone it does not do anything with its size..
min-device-width: 360px)and (max-device-width: 640px)
Here is my code
#media screen and (min-width: 360px) and (max-width: 640px),(min-device-width: 360px)and
(max-device-width: 640px) and (orientation : landscape)
{
/* CSS */
.wrap{
width:75%;
}
.iframe {
max-height:30vh;
max-width:30%;
}
.html{
background-color:red;
}
}
even the background colors not working when try to do a troubleshooting
It might be due to the device high-resolution, and thus queries never get triggered. Try specifying the resolution units on your media queries.
Otherwise just use min-height and min-width media queries. They're more reliable.
How can I apply the css only for desktops and laptops browser excluding ipad and mobile browsers?
#media only screen and (min-width: 742px) and (max-width: 769px){
#element{
display: none;
}
}
How can you guarantee a user isn't going to view your site/webapp on a desktop device that falls into the viewport width you have stated? You can't.
If really need to be that specific, device specific as apposed to using viewport width, you can sniff the browser I guess.
Here is a quick jquery demo here using:
navigator.userAgent
http://jsfiddle.net/y3ds0xpv/ - note: you'll need to view on a mobile device to see the difference between desktop and mobile.
Ultimately, I'd recommend using this if you need to use this method:
http://detector.dmolsen.com/
You could always do it like this (modified from here):
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
#element{ display: none; } /* your css rules for ipad portrait */
}
#media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
#element{ display: none; } /* your css rules for ipad landscape */
}
I'm sure you have a valid reason for doing this but I'd be careful. As a rule you should detect features, not devices.
A media query to target iPads (portrait and landscape) would be:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
so to avoid targeting iPads you can just reverse that and get everything larger and everything smaller..
#media only screen and (max-device-width:768px),(min-device-width:1024px) { }
#media only screen and (max-width: 769px){
#element{
display: none;
}
}
#media screen and (min-width:1000px){
#element{display:none;}
}
Using Foundation framework you will have options for all screen sizes be it desktops, tablets or phones. Using their 'large', 'medium' and 'small' functions. It is fairly easy to use.
With Foundation your problem would be fixed by just adding hide-for-small and hide-for-medium classes to the div being displayed only on desktop.
Finally, I got working media query only for desktops or laptops browser:
#media only screen and (min-width: 742px) and (max-width: 769px),
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
#element{
display: none;
}
}
Glad to say, it is working nice.
here i done code for style.css for mobile device it the code works for mobile portrait size and when i rotate to landscape it call default css how to solve this issue
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
another terms are
#media (min-width: 481px) {}
this for all sizes like tablet,pc ..
for this i checked in web developer tool in google crome
The problem is when you rotate the device, it is screen is bigger than 480 px
#media screen and (orientation:portrait) {
...Some Css Code
}
#media screen and (orientation:landscape) {
...Some Css Code
}
This will help you
or
you can find the landscape resolution than you can target media query with that.
For Iphone 5 your media query must be like that
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.