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)
Related
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
My goal is to get a big button to show on the website when it's on mobile. I want it to show when the screen is at 600px width maximum. Also, I've written some code with my classmates.
We want it to show the div tag when it's on a mobile device.
We'd love your guidance, thank you.
#media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
}
}
#media screen and (max-width:600px){
.button {
display: block; /* alternatively inline-block */
}
}
to show on mobile. You can then have the "default" setting in your main css file to have that div hidden:
.button {
display: none;
background-image: url('http://examplepicture.com/blablabla');
/* other properties go here */
}
This will make the .button class object be hidden on viewports greater than 600px, and visible if lower.
Demo
There is no such thing as "css = mobile". You have to bind some css rules to the screen resolution.
Since all mobiles have different screen resolution, you will have to subjectively choose a limit where you consider the screen being a mobile one.
Putting:
#media screen and (max-width:600px){
.button {
display: block;
}
}
Will show the button class to every screen with a resolution less than 600px, being a mobile or a small windowed computer browser. And it will not show on tablets with more than 600px width.
Any Windows or Linux or MacOS user on a desktop computer will be able to see the "mobile" version of a website if they shrink their browser's window.
EDIT: I updated the code.
make sure you have this in your <head> section of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
You have some syntax errors in your css. Try this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/
#media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
}
And if you want the button not to be visible over 600px do this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/
.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
#media (max-width:600px){
.button {display: inline;}
}
Step 1 : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2 : <div class="onphone">Hello</div>
Step 3 :
.onphone{display:block;}
#media screen and (max-width:768px){
.onphone{display:none;}
}
It's typically better to create individual CSS sheets for mobile devices... In that case you can do media selectors for your CSS sheets... Here is basically what I use in most cases
<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />
Then in each of those sheets, you can create the CSS you want to be shown on whichever specific device you'd like. So for a phone maybe the button is 240px when in portrait, but 320px in landscape.
Just be careful, because the way you have it, your CSS for phones will ONLY be displayed if the resolution is exactly 600px.
You should also note that in your mobile portrait css sheet you should have:
.button {
display: block;
width:100px;
background-image: url('http://examplepicture.com/blablabla');
}
and in the desktop css:
.button {
display: none;
}
And if you don't like this method, I was just trying to get you bonus points for different sized buttons for different phone/tablet orientations ;)
so on phone portrait css
.button{
display: block;
width:200px;
background-image: url('http://examplepicture.com/blablabla');
}
And BAM! You got some device-reactive CSS sheets that will impress mom and dad!
I wrote a simple HTML program for experimental purposes:
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (device-height: 375px) and (device-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?
this works for me on the iphone 6:
#media only screen and (min-device-width: 374px) and (max-device-width: 376px)
this works on the iphone 6+:
#media only screen and (min-device-width: 413px) and (max-device-width: 415px)
This works in a browser and hopefully on your IPhone too:
(Max-width and min-width instead of device-height and device-width)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (max-height: 375px) and (max-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
Use max-device-width and min-device-height.
#media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)
I have an input field with a background and a fixed width/height. It looks good in all the browsers on my desktop. But for some reason it looks bigger on the iPad and iPhone.
I tried several tricks in Css but nothing worked so far.
width: 120px !important;
background-image:url('../img/header-input.png');
height: 30px;
-webkit-appearance: none !important;
-webkit-border-radius: 0;
border-radius:0;
#include border-radius(0);
outline: none;
border: none;
Be careful, as far as I know Safari browser in iOS adds extra padding in the input fields.
Try using this code inside your css:
padding: 0;
Add this between your :
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
and if that doesn't work you can set styles for your phone/tablet using queries:
/* 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 */
}
add this inside your header
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Did a simple test of #media queries to see what works:
http://www.casedasole.it/km2014/test.html
In test.css there's a #media query that should - if I've understood media queries - change the background color from black to red on landscape tablets (1024x768). The css validates, the xhtml validates, but the background stays black in FF using Chris Pederick's Web Developer Extension -> View Responsive Layouts, and in transmog.net iPad emulator (I have no iPad).
If somebody can explain why it's not working, I'm sure I'll have fun with media queries.
First off all, these are the BEST breakpoints
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Now in your case, use this media query instead
#media (max-width:1024px) {
html, body {
background-color: #f00;
color:#000;
}
}
You need to fix your media query, using max-device-width is not valid, you can use max-width instead.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
font-size: 12px;
text-align: left;
margin: 0;
padding: 5px;
background-color: #000;
font-family: verdana,arial,geneva,helvetica,sans-serif;
color: #fff;
text-align: center;
}
/* iPad and other tablets (landscape) */
#media screen and (max-width: 1024px) {
html, body {
background-color: #f00;
color: #000;
}
}
</style>
</head>
<body>
<h1>Why is background not red in iPad landscape 1024px??</h1>
</body>
</html>
Also it seems to work if you use "#media only screen and (max-width: 1024px)"