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
Related
I was going to demonstrate screen resolution and responsive web pages, but after I managed to get an example showing on the google development tool, iPhone 7 screen emulator, but tried to browse the page on an actual phone and it's blank.
I've added the meta name:viewpoint and made sure everything is pointing to the correct file. By all accounts, it should work as it's showing on the emulator.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> iPhone 6 %amp; 7 will show</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
/* shows the same display on both landscape and portrait */
/* iPhone 7 in portrait & landscape */
/* #media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
body{
background-image: url('imgs/P-375px.jpg')
}
} */
/* comment out to only show in portrait */
/* iPhone 7 in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
body{
background-image: url('imgs/L-667px.jpg')
}
.box{
background:pink;
width:20%;
height: 20%;
padding:5%;
border: red 2px solid;
color:green;
}
}
/* comment out to only show in landscape */
/* iPhone 7 in portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
body{
background-image: url('imgs/P-375px.jpg')
}
.box{
background:yellow;
width:20%;
height: 20%;
padding:5%;
border: blue 2px solid;
color:orange;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Just change min-device-width to min-width and max-device-width to max-width - the pixel values you use in your media queries are actually "css pixels", not "device pixels" (which are twice as much due to retina displays)
i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks
In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}
Add this medai query for iPhone 5 only
/* 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) {
}
I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.
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 a problem with media queries not being used on mobile device. This works correctly on the browser, but not on mobile devices (it actually seems to render differently between Lumia 800 and iPhone phones).
I've been through most of the posts with this problem on here, and in most cases people left out the meta tag, but I've already set it in the head of the document;
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This is my mobile CSS file:
/* ===== == = === 20em (320px) === = == ===== */
#media screen and (min-width : 20em) {
.slidercontainer {
display:none;
}
}
#media only screen and (min-width : 30em) {
}
/* ===== == = === 37.5em (600px) === = == ===== */
#media only screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ===== */
#media only screen and (min-width : 48em) {
.slidercontainer {
display:inherit;
}
}
/* ===== == = === 56.25em (900px) === = == ===== */
#media only screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) === = == ===== */
#media only screen and (min-width : 68.75em) {
.container {
width:1200px;
}
}
/* ===== == = === 81.25em (1300px) === = == ===== */
#media only screen and (min-width : 81.25em) {
}
And in the head area I also have the 2 stylesheets included, a default one with the regular CSS and mobile with the .. well, mobile styles :)
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all"/>
I found out the problem it seems, I used to have only
<html>
<head>
in the header document, but once I changed it to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
it started using the mobile stylesheet as well!
A rookie mistake :)
Thanks everyone for the suggestions!
You can change it to detect a device:
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld"/>
Or, you can change it to detect a screen size:
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>
You can read more about media types: http://www.w3.org/TR/CSS2/media.html
I'm not entirely sure this is a CSS media query issue.
Even on desktop you are picking up a horizontall scrollbar below c.1240px.
I think this is related to the <div class="sidebox">. If you inspect the site using developer tools (in Chrome) or Firebug you can clearly see that someelements are breaking out of the container.
I suspect this is due to a positioning issue or mixing %-widths with defined px-widths.
Try using this method if you would like or Bootstrap 3 If Mobile First Frame Work
/* 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 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.