Hello everytime I use a float left somewhere in that page I get a weird padding at the right. with normal browsers its OK but with viewing on a iPad it's kinda ugly because I get a kind of padding of like 1 cm at the right.. Does anyone know how to solve this?
for ipad specific CSS
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#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 */
}
EDIT :
<!--Target iPad-->
<link href="ipad.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" type="text/css" />
<!--Target iPhone 3GS> -->
<link href="iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" type="text/css" />
<!--Target iPhone 4-->
<link href="retnia.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px)" type="text/css" />
the jquery
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
$(window).scroll(function() {
$('header').css('top', $(this).scrollTop());
});
};
and use your special css file for your ipad when you target it for IPAD , in the code above your file will be 'ipad.css'
Related
This is my current code:
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 750px)">
Is there an option to have a min AND a max query?
I tried media="screen and (min-width: 250px), screen and (max-width: 750px)"
but it didn't work.
Is there a solution for this?
I think you need this way
Make a file for styles route and import other the style file in the #media for any size
example :
#media only screen and (max-width: 750px) {
#import "./example.css";
}
In style.css there should be a query like this.
Example: on screens that are 600px or less, set the background color to olive
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
You can use simply like this.
#media only screen and (min-device-width: 767px) and (max-device-width: 1024px) {
/* your code here */
}
I am new to web development and I am trying to figure out how media queries work. I am trying to display one image for mobile devices and a bigger image for desktop. I have simplified the project to the maximum, to isolate the problem, and also made the background different colours to better differentiate. Here are my files:
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Website</title>
<link rel="stylesheet" media="screen and (max-width:500px)" type="text/css" href="phoneStyle.css">
<link rel="stylesheet" media="screen and (min-width:501px)" type="text/css" href="desktopStyle.css">
</head>
<body>
<div id="wrap">
<img id="phone" src="phoneImg.jpg" height="100%" />
<img id="desktop" src="desktopImg.jpg" height="100%" />
</div>
</body>
</html>
CSS:
phoneStyle.css
#desktop {
display: none;
}
body {
background-color: red;
margin: 0px;
}
desktopStyle.css
#phone {
display: none;
}
body {
background-color: black;
margin: 0px;
}
I only get the desktop image with the black background on both devices. I am testing on a local server using MAMP. Any help appreciated.
Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier if you know how to pin point a specific device. This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!
/* 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 */
}
/* The New iPad (iPad 3) ----------- */
#media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Instead of writing it this way you can follow a standard pattern of how to write media query here is the link http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Instead of manipulating it with id you can get the images depending on resolution
So I have a media query in my code that checks for device width. It works fine, just not in IE8 or lower obviously, as media queries are not supported.
I am therefore trying to throw IE8 a stylesheet (I figured I go with the one that is built for lower resolutions) but it seems that my media query (whether before or after the IE8 comment) stops IE8 from linking to any stylesheet at all.
Please could somebody inform me of a workaround? And is there a way to check for device width within the IE8 comment?
Here is my code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" media="screen
and (min-device-width:600px) and (max-device-width:1024px)" href="oldScreen.css">
<link type="text/css" rel="stylesheet"
media="screen and (min-device-width:1025px)" href="home.css">
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="oldScreen.css">
<![endif]-->
Move those media queries out into a CSS file (never put media queries inline).
Follow the format for standard device sizes. (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
/* 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 */
}
I'm guessing that IE8 doesn't like two references to the same stylesheet. If this is the case, then you may be able to get away with add a dummy parameter to one of the references and having the browser see it as two separate stylesheet calls: <link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy">
Edit:
Change
<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css"><![endif]-->
to
<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy"><![endif]-->
I have css media queries like this
<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
THe problem is that smartphone-landscape.css file is also executing for iPad. How can I prevent it? so smartphone-landscape only works in iPhone' landsacpe mode (and for devices of similar resolutions) but not for iPad.
Refering to an article from Chris Coyer, here are some specific css code to target ipad only and smartphones with media queries.
For the full article: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Note the specific "device" reference for ipad only query:
/* 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 */
}
So in your case:
<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
You will have to re-apply the stylesheet within ipad-landscape.css since the smartphone.css over writes it.
i want to test the orientation by using css for ipad.This is the css file i use
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file?
This is how i call the css in the main page
<link rel="stylesheet" type="text/css" href="iPad.css" />"
This is what I use for calling stylesheets with landscape and portrait stylesheets:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">
I also found this link for you which is pretty helpful:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
I resolved the problem by using this css.
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}