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
Related
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/
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
The goal is to display a non-responsive website fully zoomed out on iPhones. In other words, the site should initially fit an iPhone screen without horizontal scrolling, then user can pinch to zoom in.
Normally, i don't need a viewport meta tag for that. When there's no viewport meta tag, the site will automatically be zoomed out to fit a mobile screen without horizontal scrolling.
But not when the site is wider than ~1000px! When it's wider, only the first ~1000px fit horizontally and horizontal scrolling appears.
Only iPhones have this behavior. On Android it's fine.
I tried to force a viewport with a corresponding meta tag and discovered that iPhone only respects the meta tag if its value is below ~1000.
E. g. if i set...
<meta name="viewport" content="width=500;">
...the site is zoomed to 500px. If i set width=900, the site is zoomed to 900px.
But when i set it to...
<meta name="viewport" content="width=1400;">
...then the site displays as if the width was 1000 or so.
Again, Android respects any width correctly.
The question is: how to i fit 1400px wide site into an iPhone screen, so that there's no horizontal scrolling when it loads initially, until user pinches in to zoom?
Here's a demo to fiddle with: http://jsbin.com/luqari/edit
Ok, i got this.
According to Safari Web Content Guide,
The default value for minimum-scale is 0.25
Thus, a larger zoom level is enforced by default. So we have to loosen the minimum scale setting:
<meta name="viewport" content="width=1400; minimum-scale=0;">
I have an iPad application that displays email newsletters. This HTML content is pulled and embedded inside a WebView. Most newsletter widths are 650px but some are around 900px.
By default, they display too small (iPad device width is 768px) so I want to make it zoom to fill the page (I am concerned with the width only - vertical scrolling is ok).
Using the viewport meta tag, if I hard-code 650px as the device width, it will cut off the 900px-wide newsletters. Also, setting an explicit width disables resizing the viewport:
<meta name="viewport" content="width=650, initial-scale=1">
However, if I set it to variable device-width, the campaign is 'squeezed' by the screen and displays off-center:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is there a way to dynamically specify the width, so that it sets it as 650 if the campaign is <= 650, and 900 otherwise? In essence, I'm trying to set a fixed viewport dynamically based on the newsletter width. Could I use the #viewport CSS rule instead?
I ended up resolving this issue using the strategy from my other similar question:
Stretch/Fit HTML Template and Children to Window
Instead of changing the viewport meta, it turned out better in my case to dynamically scale the newsletters using JS once they were loaded.
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.