I did read about this elegant CSS viewport definition:
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Unfortunately it's not fully supported.
Could this piece be used together with the regular meta tag?:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And what about:
#-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
For creating a responsive website, the best combination would be the following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
and the following css:
#-ms-viewport{
width: device-width
}
This makes the website width equal to the user's device width on every modern browser.
If you have more questions, comment. If it helps, +1 and accept.
Related
For some reason, I have a code that is completely identical and it works fine when I test it on codepen, but it will not resize at all when I bring it to github for publishing.
The codepen is: https://codepen.io/daniel-albano/pen/ExaedBr?editors=1100
This is one extract of my CSS not properly resizing:
.mission2 p {
font-size: 1.5vw;
font-family: 'roboto';
padding: 4% 0% 0% 0%;
clear: right;
line-height: 1.4;
}
The actual website is located at: MFASP.com
I honestly have no idea what to look at for the cause of this, as both codes are exactly the same.
So I did a bit of digging and found the solution. I had not been used to using
meta name="viewport" content="width=device-width, initial-scale=1.0"
this tag, but adding it into my html had allowed the browser to resize.
Based on the issue you are having, you need to add a viewport meta tag to your page head. This is most commonly <meta name="viewport" content="width=device-width, initial-scale=1.0">.
So your html would have the Doctype followed by something along the lines of..
<head>
...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
I have a problem with setting media queries on devices. It doesn't work at all. It works like normal width. Why is that?
<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
And this is how I use it:
#media only screen and (min-width: 600px) {
background-color: lightblue;
}
It is very simple. You didn't put background-color: lightblue; in a tag
it should be in something like a html or body tag.
You should also update your meta tag to
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Your code should look something like this:
html{
background-color:red;
}
#media only screen and (min-width: 600px) {
html{
background-color: lightblue;
}
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want the webpage to turn light blue when it is smaller then 600px you should swap the two colors
For more info you can go to w3schools they explain media queries very clearly.
My website: click
How to make the website bigger on mobile phones? I would like to have bigger logo and other stuff. The zoom property is not working on iPhone, as I have this in my CSS:
#media screen and (max-width: 767px) {
body {
zoom: 150%;
-moz-transform: scale(1.5);
}
}
Zooming your website is a bad idea. Try adding this to your <head> and read more about the viewport meta tag on Mozilla Developer Network.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
first set your viewport
<meta name="viewport" content="user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />
the write zoom like
zoom: 1.8;
I am trying to do a responsive design and through searching online I can't get what I am looking for but I want everything to appear bigger on my website pages. Instead of doing each element for example font-size:1.4em;, how would I do for all the pages ?
Can you just add this in the header
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
From the comments I think that you don't have a proper viewport setup and that is why everything looks smaller on mobile devices :)
Try using two new CSS3 units for that, called vw and vh. Here's and introductory article: http://css-tricks.com/viewport-sized-typography/
For example (from the article):
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Browser support: http://caniuse.com/#feat=viewport-units
Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.