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.
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/
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
Suppose I have the following markup:
<!DOCTYPE html>
<html style="background: yellow; padding: 0; margin: 0; width: 1100px;">
<head>
<!--
<meta name="viewport" content="width=2200, initial-scale=1">
-->
</head>
<body>
<div class="container" style="width: 400px; background: red;">
<div style="background: green; width: 300px; height: 200px;">
Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes
</div>
</div>
</body>
</html>
I have set fixed width 1100px to html element. Now when I open this document in google chrome responsive device toolbar and try to decrease the width of the screen then after I go down below 1100px then the whole website starts to squeeze. If I do this
<meta name="viewport" content="width=2200, initial-scale=1">
Then the website starts squuezing at below 2200px, irrespective of the width of html and other elements. Does the width=2200 of viewport tag forces the browser to think that html tag has width 2200px so it should start squeezing at below 2200px?
Seems like this time my understanding is correct.
Every browser renders every webpage on it's viewport. On desktop screens the viewport is same as the browser window. But on mobile viewport is different in width and height from browser's width and height respectively. To elaborate why it is so consider the first case:
html document width is 800 css pixels: Suppose we want to open this webpage on iPhone5. iPhone 5 has width 320 css pixels. Now to show the 800px wide webpage what it does is, it first hypothetically acts like a desktop screen 980 css px wide. It renders the 800px wide page on this imaginary screen. Let us call this imaginary screen the viewport. Now iPhone 5 shrinks this imaginary screen by a factor of 320/980, i.e. a div of width 490 css pixels will act like a div of 490 * (320/980) = 160px -- half of iPhone's screen. Not only div's the text's font size too will be decreased by the same factor. Now let's move onto next case.
html document width is 1170 css pixels: Suppose again we want to open this webpage on iPhone5. This time iPhone cannot render the webpage on 980 css px wide viewport. In general whwnever the webpage is larger than 980 css px, the iPhone will render the page on an imaginary screen of the same width as that of the webpage. So this time the iPhone creates it's viewport 1170 css px wide. After that it shrinks the viewport by 320/1170 and renders this page on it's screen. Everything including font sizes is reduced by the same factor.
Now let's get back to the specific question asked in the question.
Does the width=2200 of viewport tag forces the browser to think that html tag has width 2200px so it should start squeezing at below 2200px?
No, it forces the mobile(tablet) browser to think that viewport's min-width is 2200 css px wide. Now when I make google chrome responsive tool bar wider than 2200px, say 2400px then the viewport also becomes 2400px wide, it doesn't shrink the webpage when responsive toolbar is wider than 2200px. When the toolbar goes below 2200 it immedeately starts squeezing the vieport because the mnimum width of the viewport is 2200px.
Surprisingly, what viewport tag actually acheives is that it enables the media queries on the webpage. If I had use the following media query with the media query along withe the viewport tag:
#media (max-width: 800px) {
* {
width: 200px !important;
}
}
then the wepage won't squeeze on screen sizes less than 800px. Note that the media query without the viewport tag does nothing below 800px. So what browsers usually do is that if they see the webpage having larger width than the viewport width then they squeeze the webpage -- which is good. The viewport tag is not supposed to stop this inner ability of browsers -- but somehow stops the browser to squeeze at below 980px and make it squeeze only when viewport width gets smaller than webpage width.. It allows us to use media queries, through which we could imploy different width to different elements. It also provides other functionalities like disallowing user to zoom--in/out by user-scalabilty, changing apperant viewport size etc.
I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.