Good afternoon, or rather night, dear friends. Just a few minutes ago, I was in the process of adding some swim trunks to the template. The template was non-adaptive and the problem was in its structure, it hid part of the content (there was a need for this), and when entering from a mobile browser (from a phone or tablet), both the content and a piece of the page were cut off. I tried to correct this misunderstanding, and during the "field tests in practice" I realized that the best solution is the use of the viewport meta tag.
The tag is intended for the correct scaling of the site on various devices, for example, on devices where the screen resolution is less than necessary. Use the tag often in adaptive templates, but few people know that it can be useful in ordinary non-responsive designs.
Let's look at the possible rules for using the tag:
1. Width
By this we indicate an integer number in pixels (from 200px to 10000px) or "device-width". This sets the width of the viewport, if the width is not specified for you, then it is taken automatically:
- 980px - for mobile Safari
- 850px - Opera
- 800px - Android WebKit
- 974px - IE
2.Height
Works on the same principle as width. However, often in 99% of cases it is simply simply not used, so you can not expose it if you do not know if you need it or not. Anyway, you can experiment with it...
3. Initial scale
This parameter sets the scale of the page. Everything is elementary here, increase the value - increase the scale. The following values are available for it, from 0.1 to 10. If you set it to 1.0, then we will indicate that the page is not scaled.
4. User-scalable
Specifies whether the page scale can be changed. Can inherit values yes or no. In the Safari browser, the default value is yes,
5. Minimum-scale and maximum-scale
These options define the minimum and maximum allowed scales for the viewport meta tag. Available values for it are from 0.1 to 10. If you set it to 1.0, then we will let the browser know that it does not scale the page. The Safari mobile browser is set to minimum-scale = "0.25" and maximum-scale = "1.6".
Now let's move on to the use cases.
Typically, the viewport meta tag is used to set the width and initial scale of the site's viewport on mobile devices, for example:
You can follow exactly the same example if your content is not wide (it is not cut off by the browser), but rather narrow (an empty space appears somewhere):
A typical mistake you might get when using the viewport meta tag is that you will be using the value initial-scale=1 for non-responsive templates. What's wrong? What's wrong here is that this setting will cause 100% of the page to be rendered without scaling. Thus, the user will need to set the scale himself or scroll the page for a long time.
The error can also be sharing parameters user-scalable=no or maximum-scale=1 together with initial-scale=1. This will disable the ability to scale on the site (on mobile templates This feature can certainly come in handy, but hardly ...). Since we will disable scaling, we will not have a chance to see the entire page.
Personally, I can only recommend one to you. If your template does not have adaptability for mobile and other devices, screen sizes that differ from those for which you did, then leave the ability to scale and do not change the scale size.
Some people think that scrolling left or right is very bad and ugly. Of course, this is not bad, it is rather inconvenient in my opinion, but sometimes this need is needed. For example, my client has a website. It has a full and mobile version, each of these versions is different templates. Accordingly, in the template for the desktop, it makes no sense to do any complex adaptations and bells and whistles for phones, the viewport tag is enough, but in the mobile, yes, everything is for phones. Here, it will be more convenient for someone to use it, 2 alternatives, so to speak ... Thank you all, good luck!
Last update: 05/03/2016
First of all, let's look at one of the key points of application adaptive design- viewport meta tag (in fact, adaptive design begins with this tag). Let's start with the following web page:
Regular web page
This is a standard web page that would look like this in a normal browser:
However, if we run the same web page on a mobile device emulator or on a real mobile device, then we can hardly read what is written on it:
By applying scaling, the user can finally see what is written there. However, this is not very convenient. At the same time, the web page has a lot of empty space, which is not very beautiful.
Why is this happening? The fact is that each mobile browser sets some initial sizes for the page and then tries to adapt it to the screen sizes of the current mobile device.
The entire visible area on the browser screen is described by the concept Viewport . Essentially, a viewport represents the area that a web browser is trying to fit into a web page. For example, the Safari browser on the iPhone and iPod sets the default viewport width to 980 pixels. That is, having received a page and entered it in a viewport with a width of 980 pixels, the browser compresses it to the size of a mobile device. For example, if the screen width of a smartphone is 320 pixels, then the page will then be compressed to this size. And all elements on the page will have a scaling factor of 320/980 applied.
Why is 980 pixels used in this case, and, say, not the actual screen size? The thing is that, by default, the browser thinks that every web page is designed for desktops. And the usual width of a desktop site can be considered 980 pixels.
In this case, each browser sets its own width of the viewport area, optionally 980 pixels. Other browsers may support different values for the initial width. But they will also perform scaling.
To avoid this not very pleasant picture, you should use the viewport meta tag. It has the following definition:
In the content attribute of the meta tag, we can define the following parameters:
Parameter | Values | Description |
Accepts an integer value in pixels or a device-width value | Sets the width of the viewport area |
|
Accepts an integer value in pixels or a device-height value | Sets the height of the viewport area |
|
Specifies the scaling factor for the initial size of the viewport. A value of 1.0 specifies no scaling |
||
Specifies whether the user can use gestures to zoom the page |
||
Floating point number from 0.1 and above | Sets the minimum viewport size scale. A value of 1.0 specifies no scaling |
|
Floating point number from 0.1 and above | Sets the maximum size scale of the viewport. A value of 1.0 specifies no scaling |
Now let's modify the previous example web page using the meta tag:
Regular web page
The web page definitely looks better thanks to the use of the viewport meta tag. Using the width=device-width parameter, we tell the web browser that the initial width of the viewport should not be 980 pixels or some other number, but the actual width of the device screen. So then the web browser won't do any zooming since we have the same viewport width and width.
We can also use other options, such as preventing the user from scaling the page dimensions:
It so happened that mobile browsers appeared relatively recently, and by that time there were already sites on the network great amount. Naturally, all these sites were not optimized for the small screens of smartphones at all, and smartphones, in turn, were forced to believe that all sites are somewhere around 1000px wide (980px in Safari). It was necessary to somehow solve the current situation and Apple came up with a meta tag , which, according to tradition, was later stolen by all other browser manufacturers.
Let's look at a typical epic website layout:
html
hello world
Let's open it in a mobile browser. Here's what we'll see:
As you rightly pointed out, the text is too small and it happened because safari tried to fit our site (which it assumes is made for browsers with a screen width of about 980px)
Let's now tell the browser that our site is responsive to any screen width.
html
What happened:
Well, now everything is much better. By denoting width=device-width , we told the browser that we wanted the content viewport to be equal to the width of the mobile device's screen.
You can manually set a value for width. For example content="width=320px" , but this is not recommended because different smartphones can have completely different screen widths.
A very common option is:
html
this option sets the page width and the initial scale (in this case, without scaling)
The following is also often used:
html
Such values are used if the site will be used and function as mobile app. Those
- when the page loads it will not be scaled
- the page will take up the full width of the mobile browser
- any custom scaling is prohibited
- only horizontal and vertical scroll available
Use this configuration only if you know what you are doing.
Let's take a look at the valid parameters and their values available in the viewport meta tag.
width
An integer (from 200px - 10,000px) or "device-width".
Sets the width of the viewport. If the viewport nirina is not specified, then:
- for mobile safari it is 980px
- Opera - 850px
- Android WebKit - 800px
- IE - 974px
height
An integer (between 223px and 10,000px) or “device-height”
sets the height of the viewport. 99% of the time, just ignore this parameter, but if you really need it, try and experiment. Good luck..
initial scale
1.0 - do not scale. Sets the scale of the page. Increase the value - increase the scale.
user-scalable
Available values are no or yes
Specifies whether the page scale can be changed. Default is yes in Safari.
minimum-scale and maximum-scale
Available values (from 0.1 to 10).
1.0 - do not scale. Specifies the minimum and maximum scale of the viewport, respectively.
The default in mobile Safari is minimum-scale = "0.25" , maximum-scale = “1.6”.
Advice: Do not use meta tags (including this one) until you understand why all this is needed. And test everything in different mobile browsers. Good luck!
Hello everyone, today we will talk about what is viewport and how to use it.
In order to understand what it is, you need some kind of mobile device. Now let's create a simple html page like this:
test post
this is a test post
another post
this is pretty cool
new post
Now let's open our page on a mobile device and what will we see? And we will see that the text is too small and difficult to read. However, if we add the following content tag to the tag head
Now the text looks fine. Here is the drawing. On the left without a tag, and on the right with it
Why is this happening? The fact is that the default browser thinks that the site is made for the desktop version of the browser and tries to fit it completely into the window of your smartphone. By setting the tag, we tell the phone browser that the view width is equal to the width of the smartphone. Here is such a simple tag, but it helps a lot when creating mobile version site.
You can also set the scale. For this, it is used inital scale
If you want to prevent the user from zooming the page on their smartphone, you can write the following:
But you need to be careful, because. it happens that the text is quite difficult to read and you have to enlarge it, but if this is prohibited, then you will cause inconvenience to the user.
Browser Support
Android support but up to version 2.2 . the initial scale is 1.0
Symbian, Nokia 40 series, Motorola, Opera mobile/mini and NetFront not support
IE supports with 6 versions
BlackBerry supports since version 4.2.1
As you can see, support is still incomplete, but you can already use this tag, because. most new smartphones already understand it.
So, that concludes this article, thanks for reading.
→ CSS device adaptation via @viewportWhen we want to customize the browser window on our device, we usually use HTML tag . However, oddly enough, the meta tag is not "normative" - it is not in the official W3C standard.
The viewport meta tag was first implemented by Apple on the iPhone and then other browser vendors. Today it is widely used due to the popularity of iOS, Android and other platforms for tablets and smartphones.
Since the viewport meta tag is purely for customizing markup, we can say that it rightfully belongs to CSS. That is why the W3C strives to standardize new method adaptation, in which window control is transferred from HTML to CSS.
@viewport css rule
With the new @viewport rule, we have the same window control as with the meta tag, except that such control is purely through CSS. As with the meta tag, it is recommended to set the width of the browser window using device-independent device-width:
@viewport (width: device-width; )
Today @viewport is used by programmers for "snap mode" in IE10 − windows function 8, allowing you to work in multi-window mode. Oddly enough, IE10 ignores the meta tag if the window size is less than 400px, which makes it impossible for sites using this meta tag to optimize for such small windows. To fix this, programmers should use the device-width parameter mentioned above, or define a @viewport rule in the media query.
Using @viewport in media queries
We can use @viewport in media queries. For example, the following media query is used to set the layout of a window that is less than 400 pixels wide (for example, multi-window mode in IE10) to a width of 320 pixels.
@media screen and (max-width: 400px) @-ms-viewport ( width: 320px; ) ... )
AT this example, if the device is set to a resolution range of 640 to 1024 pixels, the @viewport rule scales the window to 640 pixels.
@media screen and (min-width: 640px) and (max-width: 1024px) ( @viewport ( width: 640px; ) ... )
New @viewport handles
Even though we can control the zoom and zoom function, some of the viewport properties - or as they are now called "handles" - have changed.
zoom
The zoom descriptor is the equivalent of the initial-scale in the meta tag. As well as minimum-scale and maximum-scale , there are descriptors for max-zoom and min-zoom:
@viewport ( width: device-width; zoom: 2; )
user-zoom
The user-zoom descriptor is equivalent to the user-scalable parameter
@viewport ( width: device-width; user-zoom: fixed; )
Browser Support
As of today, the @viewport css rule is only supported by Opera and IE10. Looks like Chrome and other browsers will implement it soon as well. this meta tag is expected to become the new official web standard soon.
For now, you need to add a vendor prefix to the @viewport rule:
@-ms-viewport ( width: device-width; ) @-o-viewport ( width: device-width; ) @viewport ( width: device-width; )
Of course, we still need to include the viewport meta tag in html page, because he's not going anywhere anytime soon. But it's not so scary to look into the future anymore - adding the @viewport rule just makes our sites and applications future-friendly.