#media only screen and (min-width: 768px) and (max-width:1199px) {}
I want to put Media query only for safari browser for given Size of device.
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width:1199px) {
::i-block-chrome,.allsearch-in select{display:none;}
}
still not Working...
CSS Media Queries for iPads & iPhones
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 */ }
Browser Specific Hacks
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
ThankYou
Add Class for safari browser to determine browser name by javascript
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') == -1) {
alert("2"); // Safari
//add class to body tag
}
}
then use this class in css.
Related
i want the green and red box to be smallere at mobile (iPhone): http://shop.cykel-expressen.dk/booking/
I thought this was the code, but it is not working, but isn't working)):
#media all and (min-width:321px) and (max-width: 480px) .dopsp-body { .dopsp-body height: 50xp }
You are missing { after the (max-width: 480px)
#media all and (min-width:321px) and (max-width: 480px) {
.dopsp-body { height: 50px }
}
You can use media query for this.
#media screen and (max-width: 480px){
//Reduce the size of green and red box here
}
You are using wrong method, try to this.
#media only screen and (max-width: 479px) {.dopsp-body {height: 50px }}
try first is for portrait second for landscape code is on http://stephen.io/mediaqueries/ has plenty of good snippets
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
In the code example below there are two cubes with styles for desktop and mobile.
on the iphone for example the cube should be green whereas on desktop it should be (and is) red.
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green.
Same on the iPad.
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something.
What am I doing wrong?
/* for desktop */
#media only screen and (min-width: 400px) and (max-width: 767px) {
#block2 {width:100px;height:100px;background:red;}
}
/* for iPhone */
#media only screen and (min-device-width:320px) and (max-device-width: 767) {
#block2 {width:100px;height:100px;background:green;}
}
/* for desktop */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
#block {width:100px;height:100px;background:red;}
}
/* for iPad */
#media only screen and (min-device-width:768px) and (max-device-width: 1024) {
#block {width:100px;height:100px;background:green;}
}
<div id="block"></div>
<div id="block2"></div>
There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)
to
(max-device-width: 767px)
(max-device-width: 1024px)
Try something like this.
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and
(min-device-width: 320px) and (max-device-width: 568px) and
(-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
For more details - CSS-Tricks
I am trying to target small phones like 3 to 3.5 inches
for Example:
HTC DESIRE C
using #mediaQUery but not able to do that .
I could target the standard mobile phone width that is as follow.
#media only screen and (min-device-width : 320px) and (orientation : portrait) {
.bar {
display:none !important;
}
}
#media only screen and (min-width : 321px) and (orientation : landscape) {
/* Styles */
.par {
display:none !important;
}
}
JSFiddle
So what I want to do is show the class .par only when the width of the screen is equivalent to 3inch phones
Most of the resolution will fall within 320px
So you have to changes min to below code
#media screen and (max-width: 320px){
/*YOUR CODE */
}
I have finished a website, it's working fine in browser now. I have been asked to make it compatible with Android, iPhone, iPad, Tablets,and web etc. I'm using bootstrap asp.net.
Now I'm trying and couldn't find any answer. I'm using these inline media queries
#media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
#media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
#media screen and (min-width:481px) and (max-width:540px){/*Any css will be defined here*/}
#media screen and (min-width:541px) and (max-width:775px){/*Any css will be defined here*/}
#media screen and (min-width:768px) and (max-width:783px){/*Any css will be defined here*/}
#media screen and (min-width:776px) and (max-width:1536px){/*Any css will be defined here*/}
#media screen and (min-width:1537px){/*Any css will be defined here*/}
But in some iPads the CSS is not applied. Now my question is, what's the standard resolution and orientation for #media which will cover all (Android, iPhone, tablets and Web etc) CSS?
/* 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),
and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
That's what I use, and it works for almost everything.
After spending many hours I found this helpful. This is used by Bootstrap itself and I followed that. It will cover all the devices (Android, iPhone Tabs and web etc).
#media handheld, only screen and (max-width: 2200px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 1200px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 1024px)
{
/* Styles */
}
#media handheld, only screen and (max-width: 767px) {
/* Styles */
}
#media handheld, only screen and (max-width: 600px) {
/* Styles */
}
#media handheld, only screen and (max-width: 500px) {
/* Styles */
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Styles */
}
Hey All i m bit new to ipad -3 designing. Can any one guide me how to set media queries for ipad-3.thanx in advance
The new iPad has the same width and height as the first and second iPad so you just need to apply the same media queries:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
#media screen and (device-aspect-ratio: 3/4) {
// your styles here
}