iPad always assuming portrait-width as max-width - html

I am building an reponsive-website, having 3 sizes. Max 480px, max 768px and max 1024px+;
However, I have a problem when using the iPad. On a Galaxy Tab 10.1 it works like a charm, in my browser it works also good.. but it seems that whenever I use the iPad it always seems think the max-width is 768px.
This is what I mean:
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<style type="text/css">
body {
background-color: red;
}
#media screen and (max-width: 480px) {
body {
background-color: green;
}
}
#media screen and (min-width: 481px) and (max-width: 1023px) {
body {
background-color: brown;
}
}
#media screen and (min-width: 1023px) {
body {
background-color: blue;
}
}
</style>
<body>
<div class="color">
Some color
</div>
</body>
</html>
Although my requirements do not include iPad support, I do want to support it.

This has probably to do with max-scale, min-scale and initial-scale - try setting all of these to 1 and see if anything changes.
The downside is that iOS users won't be able to pinch to zoom in your page.
When you rotate the iPad it doesn't change the viewport, rather it scales the content. There is a good explanation from Allen Pike.

Related

Prevent running of mobile specific media query(landscape) on desktop view(landscape)

First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.
Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.
I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.
There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?
Please let me know if you are unable to understand.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<style>
#div-2{
display:none;
}
#media screen and(min-width:320px) and (orientation:landscape){
#div-1{
display:none;
}
#div-2{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1"><p>Orientation lock not applied.</p></div>
<div id="div-2"><p>Orientation lock applied.</p></div>
</body>
Ok i understand now replace the code hope this is useful for you:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<style>
#media screen and (min-width: 320px) and (orientation:landscape) {
#div-1 {
display: block;
}
#div-2 {
display: none;
}
}
#media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
<p>Orientation lock applied.</p>
</div>
</body>
</html>
I think there is not any strange thing.
You write this media query:
#media only screen and (min-width:320px) and (orientation:landscape) {
#div-1 {
display: none;
}
#div-2 {
display: block;
}
}
That contains desktop. So in desktop div-1 is hide and div-2 is visible.
If you want this media query works only for mobile you must use max-width
that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop.
This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:
#media only screen and (max-device-width: 320px)

#media not working on phone but does on desktop

I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }

CSS - How to display an object when it is on mobile?

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!

Embedded CSS Media Queries Not Working

I am new to CSS media queries, and I was first trying to get pdf/mp3/mp4 buttons to get centered on this page whenever a mobile device is using it (http://www.mannachurch.org/portfolio-type/recycled-junk/). Keep in mind for that I am using a highly modified wordpress theme.
So I tried experimenting to isolate this issue. However, I don't seem to have any control over using media queries and I can't even perform anything even on this simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
body{background-color: blue;}
#media only screen and (min-device-width : 599px) and (max-device-width : 600px) {
body {background-color:black;
}
}
</style>
</head>
<body>
<p>This is an experiment<p/>
</body>
</html>
What am I doing wrong?
Your media query only leaves a one pixel range to work with. Between 599 and 600. You would want something like:
#media only screen and (max-device-width : 600px) {
body {background-color:black;
}
}
Add viewPort Meta tag in your tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is reference : http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Can you fix you width properties as you have a 1px differencial
min-device-width : 599px
max-device-width : 600px
I found a solution that worked. This question was sparked from a theme I am trying to customize in wordpress. The editor in wordpress is REALLY wonky. At least now I know I'm doing the CSS media queries right. This is what worked:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style type="text/css">
/*-- EUREKA!!! IT works! */
body{background-color: blue;}
#media all and (min-width: 250px) and (max-width: 400px) {
body{
background-color:black;
}
}
#media all and (min-width: 640px) and (max-width: 760px) {
body{
background-color:black;
}
}
#media all and (min-width: 768px) and (max-width: 1024px) {
body{
background-color:black;
}
}
</style>
</head>

#media query looks OK but doesn't work

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)"