Is it mandatory for responsive design the use of the meta tag viewport?
<meta name="viewport" content="width=device-width,initial-scale=1">
I have done few test without and it works well on desktops browser and it adapts propertly to the size of the windows, even if I use viewports as width or height to define header and footer.
So is that meta tag only useful to mobile devices or that's either necessary?
Does viewport use a default width or height for mobile devices?
When the meta tag is not defined there is a virtual viewport default values defined. Non-mobile-optimized sites with these default vaules looks in general better on narrow screen devices.
On Safari iOS the default width is 980 pixels, and the others browsers width size are alike or a little less.
Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page.
For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
Explanation and default values for width and height with viewport on mobiles
Apple as the inventor of viewport says that the default viewport settings are:
The default width is 980 pixels. However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device.
Apple configuring viewport and default values
This is the common setting of viewport used in various mobile-optimized websites. The width property governs the size of the viewport. It is possible to set it to a specific value (“width=600”) in terms of CSS pixels. Here it is set to a special value(“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time.
Note: The meta tag should be added in the head tag in HTML document.
A Responsive tags has the following attributed:
width: Width of the virtual viewport of the device.
height: Height of the virtual viewport of the device.
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out.(value= yes/no).
Ref: https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/
Related
This is a test page mentioned in Google web dev responsive design article for testing the viewport meta tag:
https://with-vp-meta.glitch.me/
There is a strange behavior observed when testing with chrome dev tools responsive devices in devices with very low width (at least below 320px)
If you keep on reducing the width, there comes a point where the html body width is not equal to the device pixel width anymore (though it should be equal as per the width=device-width value).
It looks like this:
As you can see, the body tag is selected in the Elements panel. The size of the selection is much less than the 81px device width as mentioned in the dev tools device header (81 x 711)
If you look at the dimensions in computed styles: the dimensions are mentioned as 81px width
This is a real issue, actually happening with my website (on not so smaller width), and this is just an example to recreate it easily.
I suspect this has something to do with the viewport meta tag and it's handling, but i am not able to pinpoint what the problem is. I have tried different combinations of width and initial-scale to recreate this scenario in other dimensions, but wasn't able to recreate a scenario where the rendered body width is less than the viewport width, but devtools inspect still shows the dimensions as correct, although the rendered dimensions do not match the pixel dimensions?
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
This question already has answers here:
How is the meta viewport tag used, and what does it do?
(4 answers)
Closed 7 years ago.
In another words: What is the purpose of viewport element in HTML 5?
Because using media queries appropriate CSS styles can be applied according to screen size of device. Why we need viewport element with this part "width=device-width".
I was going through this w3 schools tutorial (http://www.w3schools.com/css/css_rwd_viewport.asp).
It gives an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag. How this works?
The tutorial says the meta viewport element sets page width as width of device. How this work restrict the page from horizontally scrollable and scalling down ?
I thought the above effect is due to media query. Why viewport element's width attribute needed for responsive design ?
What is the purpose of viewport element in HTML 5?
By default mobile devices will assume they are loading a wide, desktop style web page and scale it down to fit your small screen.
You overide this behaviour by specifying the viewport meta tag
<meta name="viewport" content="">
You specify the width your page is designed for with the content attribute. For example if it was a mobile only design you might have
<meta name="viewport" content="width=320">
Responsive web design is based on a flexible layout, and so instead of specifying a set pixel width for the viewport you instruct the browser to match the page layout to the device
<meta name="viewport" content="width=device-width">
I thought the above effect is due to media query.
Media queries are the second key part of mobile and responsive design.
The viewport meta tag is giving the browser instructions on the design width of the page, media queries let you style the page differently for different device widths. For example you might use media queries to style an <h1> element as 36px on desktop but 30px on tablet and 24px on smartphone
The tutorial says the meta viewport element sets page width as width
of device. How this work restrict the page from horizontally
scrollable ...
To clarify, setting the page width doesn't automatically stop horizontal scrolling. If you set the viewport meta to content="width=device-width" and you have an element with a fixed width of say 960px, it's not going to fit in the viewport of your smartphone and you'll have horizontal scrolling.
With responsive design it's still up to you to ensure that all the elements on the page will resize for different devices. You do this by giving them either a flexible width, or use media queries to set fixed widths for different screen sizes.
Good luck!
Using the meta viewport value width=device-width instructs the page to match the screen’s width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.
Is it really necessary to use viewport tag?
Is the viewport meta tag really necessary?
Learn More about Viewport
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en
I am styling a non-responsive website and having issues in mobile views. I have no viewport set. I assume content should appear the same on mobile as it does on desktop only zoomed out.
Here is a visual of my issue:
Explanation:
When viewing on desktop it is fine. On iPhone (mobile) the header, nav and footer's widths shrink (see image) and the main content essentially extends beyond the phone viewframe (or viewport or whatever)...
Thanks!
If your site is not responsive, it will help to set a viewport. Open up the site in your web browser and find the minimum width that causes your design to not break. Then use the following meta tag in your header, replacing width with the minimum width you want your site to show at.
<meta name="viewport" content="width=1024">
The meta viewport tag tells the browser that it should render the web page at a different width than the default. For instance, the default viewport size for Safari iOS is 980px, which means that for web pages without a meta viewport tag, the body will be rendered 980px wide. By specifying a meta viewport tag with a width of 1024, the body will be rendered at 1024px wide instead.
To illustrate, here's an example of a website that has a main div with a width of 590px, how it renders at the default viewport size of 980x, and how it renders when a custom viewport width of 590px is specified using the meta viewport tag:
Details on the viewport meta tag:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I read this article A tale of two viewports
In this article the author writes:
"the CSS layout, especially percentual widths, are calculated relative to the layout viewport"
"The point is: browsers have chosen their dimensions of the layout viewport such that it completely covers the screen in fully zoomed-out mode (and is thus equal to the visual viewport)."
I do not understand the following paragraph :
"Now what you could try is setting html {width: 320px}. Now the element shrinks, and with it all other elements, which now take 100% of 320px. This works when the user zooms in, but not initially, when the user is confronted with a zoomed-out page that mostly contains nothing"
If the screen size of device is around 320 pixels so is the layout viewport and if the css width for the html element is set to 320px why does element shrinks ?
Thanks
If the screen size of device is around 320 pixels so is the layout viewport and if the css width for the html element is set to 320px why does element shrinks ?
you have a default viewport of ca 980px on your mobile device, if you do not reset it with the meta-tag <meta name="viewport" content="width=device-width"> (or any addition to that).
A mobile browser auto scales your page so the size of 980px fits the screen, making your 320px only a third of that.