I read a w3school tutorial about viewport meta tag, so they give 2 examples to explain the usage of the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The first example one without it shows as expected, while the second example with the tag adjust the image width on smartphones making it 100% the viewport width, witch doesn't make sense to me. Why would setting the virtual width equal to the device width make that kind of adjustment, the image shouldn't normally fit the whole width in both cases as it's set width of 460px is smaller than my device width of more than 1000px and a wider virtual width.
My second inquiry is about initial-scale=1, shouldn't that be the default value, what would be different if we didn't declare it.
Thank you for your attention.
Look at the CSS for that page.
img {
max-width: 100%;
height: auto;
}
The max-width overrides the width.
In addition to Quentin's answer,
If you set the initial scale to "1.0" then the web page is displayed to match the resolution of the target density 1-to-1.
Related
I'm working on responsive design. My goal is to make my website responsive for all sizes.
Generally, I increase the font-size of my elements as the width of the device increases.
But what if the width increases and the height remains the same? I was thinking about this scenario while creating a responsive design.
ex: 400x300 500x300 600x300
In this scenario, as width increases I increase the font-size. But the height stays the same leading to oversized elements because the height stays the same, when the font-sizes are increased.
So as other users have said before what you want to do first is include this meta tag in your html header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
then you would go to your CSS file and select a certain veiw size.
#media (min-width:300px) and (max-width:400px){
.myClass{
height: 18em;
font-size: 1em;
}
}
This #media allows the CSS to run ONLY when the viewport is within the specified range, in this case between 300px and 400px. You can treat it just as any normal CSS modification, change height, font size, color, background etc. Just remember to open and close your #media with curly brackets{} just like you would when you select an element in CSS.
I use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope it helps!
I know this question has been asked before; however, I have not seen any answers that have worked, at least for me. Here's what I mean:
When I write in my document head
<meta name="viewport" content="width=700">
It is like it has no effect what so ever it always just sizes to the device-width.
Same with this javascript solution which sets a minimum width when it sees that the screen width is smaller than the specified minimum width that I have seen as answers for this question.
<script type="text/javascript">
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (window.innerWidth < 700) {
viewport.setAttribute("content", "width=700");
} else {
viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>
But still has no effect.
So what I have been doing is setting the minimum width on the html and body like this
html, body {
min-width: 700px;
}
which I am happy to say works brilliantly but the reason I need the viewport element to have a minimum width of 700px is because I have font-sizes that are based on vw and vh (viewport width and viewport height) so the webpage has a minimum width of 700px but the font sizes continue to shrink according to the device-width.
So basically to sum it up at the end I will have a window width of say 400px, a page width of 700px, and a font size that is based off a 400px page width.
Please help! Any suggestions would be greatly appreciated.
You can do it in a pure CSS!
#media screen and (max-width: 700px){ html,body {min-width:700px} }
Which reads, if browsers width is less than 700px, set html and body min-width to 700px.
You cannot change the size of your document or body with viewport property. As you already know the viewport is a property of meta tag. Which means these properties are for your browser to follow not for your document. Example:
<meta name="author" content="John Doe">
Similarly viewport property would tell your browser that how much of your document should it show on the screen when it starts up. As described by W3C:
This specification provides a way for an author to specify, in CSS,
the size, zoom factor, and orientation of the viewport that is used as
the base for the initial containing block.
meaning It specifies the width(and height) that should be assumed by the browser to show(scale) the web page(document) when It starts up(initial containing block).
This is legacy method when developing website for smaller device than 960px width (browser assumed this default width) you would set the viewport so the browser would show you document properly.
Now a days best practice is to set this in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and manage everything else with css media queries so that your user doesn't have to zoom in or out due to bad scaling on small devices.
Demo
I want to make responsiveness behaviour like at this site.
There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".
You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.
UPD
I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean
Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:
It is important to understand the function of the meta viewport.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
-Source
This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).
The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.
The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:
body {
min-width: 300px; /*You'll have to set the value you wish here*/
}
The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:
You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.
The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).
This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.
The solution was simple. I needed just set body min-width
My website is positioned perfectly for me but not for my larger monitor. The div's are more compact on the larger monitor and incorrect. How can I fix this?
You need to use media query for responsive. if you used it, may be your meta tag is not working correctly.
below the examples are.....
#media screen and (min-width:00px) and (max-width:00px){
/*extra style will goes here.
}
Don't forget to use this <meta .../> tag on <head></head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
I believe that you have problems because you hard-coded the sizes.
I'd suggest you to use relative sizes, e.g.:
#el{
width:50%;
height:100%;
}
In the above example, an element with id = "el" will have width which will be half the width of the window and the height of this element will be equal to the height of window (unless this element is located in another element, the width and height of which is less than 100%).
So I'm trying to make my website adjust for mobile browsers. I've got 2 CSS files, one which is always included and one with
media="screen and (max-width:500px)"
To get that to work, I'm using the meta tag
<meta name="viewport" content="width=device-width" />
This works great sa long the content-wrapping divs have a fixed width, or if the screen is less than 500px wide. But when I flip my phone (and thereby get >500px width), divs directly in the body with their width set to 100% get cut off. I'm assuming because width=device-width makes css 100% equal to the screen width, even if the website is larger than the screen.
Proper in a desktop browser (the background is meant to cover the entire document width):
In (flipped) phone or chrome mobile emulation. A large chunk of the menu cuts out.
CSS:
#top{
position:relative;
background:rgba(191,186,130,1);
height:150px;
width:100%;
overflow:visible;
}
Is there any way I can make the div width span the entire document? Do I need javascript to detect this?
Set your initial scale equal to 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />