How to switch from mobile version to full version. Mobile version of VK - login via computer
The mobile version of VKontakte is specially adapted for small screens mobile phones website social network No. 1 in the CIS (total audience per day is more than 80 million people, and the number of views is more than 1 billion). Every year, more and more people use smartphones to access social networks, and it is quite natural that some problems arise. In this material we will tell you how to solve them.
VK: Mobile versionIf you don’t have a smartphone or tablet at hand from which the user visits the VKontakte social network daily, then help will come laptop or regular computer. Of course, in some cases it is more convenient to use the full version of VK, but some people only like the mobile version. For just such a case, we are happy to announce that you can also use the mobile version on your computer!
How to log into the mobile version of VKontakte via a computer or laptopWhen entering the official VK website, the user sees a regular wall and sections on the left. The desktop version in the browser address bar looks like this: https://vk.com (the site protocol must be secure with the letter “s” at the end, otherwise there is a risk of getting caught on another site).
To access the mobile version of VK, just enter the following address in the address bar of your browser - https://m.vk.com. As you can see, the difference in the address is the addition of the letter “m”, which means mobile.
When you access the site from a smartphone or tablet, you are automatically redirected to the mobile version.
By the way, you can also open the full version of VK from your phone. To do this, on the left side of the site, look for the “Full version” item.
Attention! there are answers to the most common problems with the mobile version of VK, namely:
How to switch to the full version of VK on a smartphone?
Why does the mobile version open on a computer (laptop) instead of the full version?
If you haven’t found the answer to your question, ask it in the comments, we’ll try to answer quickly!
What is the difference between the mobile version of VKontakte and full versionFor a hands-on comparison, log in to the regular version - . And in another tab, open the mobile version of VK. There are very few differences between the full and mobile versions of VK, but there are some advantages that are worth considering:
On desktop VKontakte, these signs are completely different, with the exception of functionality, of course. If you go to the full version, targeted advertising will be shown among the sections on the left, which cannot be disabled even with the help of a blocker.
The font is much smaller, although this problem can be solved by increasing the browser window scale.
For comparison, font sizes in the mobile and full versions of VK:
Regular font
Font in mobile version on PC
As for loading the site, the full version has more elements, as well as more code. They take especially long to load various scripts. If there is little traffic and the Internet is not very fast, it is preferable to use the mobile version from both a smartphone and a PC.
Interface of the mobile version of VKontakteLet's look at the main sections that are available in the mobile version of the VK social network. These sections are also available in the desktop edition. Only the location of the functions changes.
VK mobile version settingsIf you go into the settings, then, as in the full version, there are the following sections, arranged compactly and minimalistically:
Account – contains settings that allow you to:
In the full version, there are many more options in the security section.
Privacy – here are the main parameters where you can configure:
- visibility of basic profile information;
- visibility of photos for users;
- visibility of saved photos;
- group display;
- displaying a list of audio recordings;
- displaying a list of gifts;
- hiding friends;
- visibility of notes on the wall;
- interaction with other users;
- web page visibility
The next section is Alerts. Here you can set up notifications about actions that are taken in relation to your page, for example, when someone puts the “Like” mark, a dark window will appear where it will be shown that they liked it. These parameters can be configured as the user wants.
Blacklist – people with whom the user no longer wants to communicate are added here.
Money transfers – using the VK service you can send funds to other people, and this section will display the completed transactions.
On the Internet you can find many different applications for Android and iOS devices. Of course, it is worth installing software that has earned the trust of users and not downloading applications from dubious sources.
The best option is the official VKontakte application. This client is available on both Android and iOS. The presence of Material Design makes the interface very pleasant to look at. The official client is very convenient to work with, but there are drawbacks in terms of restrictions on listening to music up to 30 minutes a day and advertising. As for the load, the application is quite heavy and can consume a lot of system resources.
In terms of functionality, most applications are no different from the desktop version of VK.
VK Coffee for Android is a modification of the official client. It has features such as being invisible, using multiple accounts, no ads, PIN code protection and much more. You can download music to your phone.
VK MP3 mod – supports the function of invisibility for other users, working with multiple profiles, encrypting correspondence, and using a large number of different stickers. The special feature is downloading music in unlimited quantities.
Kate Mobile- one of the popular and convenient clients for VK. Has the following advantages:
Using this program for a smartphone, the user will be able to customize the appearance for themselves. Login is carried out not only using a PIN code, but also with a fingerprint.
If the user wants to listen to music and save it in the cache, he will have to download Pro version from the official website of the application, since it is not in the Play Market.
Lynt lite - the client is very similar to the official one. Made in Material Design style and has the same functions. Feature in appearance and design themes.
VKontakte Amberfog is another popular client made according to the Material Design concept. Has the same functionality as Kate Mobile. Most of these options can only be used for money. If you don’t want to pay, you can complete tasks for which the user will be awarded coins. For them you can buy some Amberfog function for a month.
Phoenix Lite - the only difference is in design, the functions are the same as in other clients.
Polyglot VKontakte - there are no differences. The disadvantage is the lack of music and video sections.
As you can see, there are a lot of clients for mobile devices. And if you like simplicity and accessibility, then nothing prevents you from using the mobile version of VK from a computer or laptop.
Useful video - How to make a mobile version in VK:
https://www.youtube.com/watch?v=v296tljggV8 Video can’t be loaded: How to make a Mobile version in VK (https://www.youtube.com/watch?v=v296tljggV8)
Answers to the most frequently asked questions according to the mobile version of VKontakte:How to switch to the mobile version of VK on a computer?
Switching to the mobile version of VK is very easy - just add the letter “m” to the web address of the site https://vk.com/. Together it will look like this: https://m.vk.com/
How to switch to the mobile version of VK on a smartphone?
If for some reason you have opened the desktop version of the social network on your phone, it doesn’t matter - do the same thing in the URL input field as in the previous answer - add the prefix “m” to the address.
How to upgrade to the full version of VK on a smartphone or laptop?
This can be done in two ways - either by clicking on the special “Full version” menu item, which is available on both the phone and the computer, or by removing the “m” prefix in the URL line.
Why does the mobile version open on a computer (laptop) instead of the full version?
One of the reasons is that you could involuntarily save the mobile version in your browser bookmarks. Another reason is that in your browser you click a link to your last saved visits, where there may be a version of VK for mobile phones. To prevent this, enter a query in the search bar (usually something like ml vk com or m.vk.com input) and then click on the VK website without the “m” prefix in the URL.
Why does the full version of VK open on my phone instead of the mobile version?
The same situation (only the opposite) can occur on a smartphone. If to enter VK you click on the last page you visited, or on a saved bookmark with the regular version, then to change the situation and get to the mobile version, just click in the search on the Vkontakte website with the prefix “m”.
Attention! Friends, if you still have questions or unresolved problems related to the mobile version of VK, feel free to ask them in the comments (below)!Did you know about these VKontakte opportunities?
https://www.youtube.com/watch?v=-rhA9_9DM6U Video can’t be loaded: 5 SECRET FUNCTIONS OF VKONTAKTE THAT YOU DIDN’T KNOW ABOUT (https://www.youtube.com/watch?v=-rhA9_9DM6U)
Greetings, my dear blog readers. Ruslan Galiulin is in touch. Today we will talk about mobile versions of websites that every website or blog should have in order to move to the TOP search engines. In the article I will provide style codes and ready-made examples of page layout that you can download to your computer.
If your site is still not mobile, I recommend using my advice or contacting professionals - http://www.Mobile-version.ru who will do everything according to search engine standards. Using the same link, you can check your site for mobility.
In 2013 Google started pressure on webmasters (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convincing them of the need to create lightweight site modifications, and since 2015, mobility has become one of the ranking aspects ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Yandex is not far behind, having created a special “Vladivostok” algorithm that takes into account the site’s suitability for viewing on phones.
Mobile Friendly today is not just about taking care of visitors, but an indispensable condition for promotion.
When a website is created from scratch, the Mobile First approach is used. But most have old work projects. The main question that the mobile version of the site raises in such situations is how to make it without spoiling the existing template?
There are three approaches:
- A separate address and layout - placed on a subdomain like m.site.ru. Redirection occurs through a server redirect to the user agent.
- Responsive design - the url and html remain the same as in the desktop format, but in CSS media queries provide rules for different screens.
- RESS is a responsive design, the address remains the same, but the server sends style sets depending on what type of hardware is requesting the page.
For owners of old projects optimal choice- use of adaptive layout. Let’s look at how to do this with your own hands and without using unsafe plugins step by step.
Mobile version of the site: how to do it rightFurther actions will require confident basic knowledge html and css or the ability to quickly google incomprehensible things.
Information for beginners: in CSS, the words before the curly braces mean specific pieces of the html file for which they are responsible for displaying. They are often written with a dot or hash - #place (property: value;).
Step 1. Remove restrictions.
Owners of rubber layouts can skip this step. The rest will have to work harder.
Width - we look for large sections in the code with a rigidly defined display. If the parameter is specified in pixels or points, you need to change its value to percentages, ems and other units that are sensitive to the environment. Often the main container or content area has a fixed width - in most cases the restrictions are removed by replacing it with max-width.
Pictures - instead of clear sizes, we write properties for the img tag, which will make the images adaptable. Photos will change proportions within their parent containers.
img(
Max-width: 100%;
Height: auto;
Tables - you won’t be able to set them to be fully responsive, but you can make pages with them suitable for mobile devices by adding this code:
table (
Display: block;
Width: 100%;
Overflow-x: scroll;
Overflow-y: hidden;
Ms-overflow-style: -ms-autohiding-scrollbar;
Webkit-overflow-scrolling: touch;
Wraps are specified by the float property. Setting this parameter will allow blocks to move depending on window parameters, adjusting to elements with a stable position or within parent containers. Standard div elements are translated by default each to new line. For example, placing 1000 px div blocks of 200 px each in a container, you can see the following picture.
The blocks stood on top of each other. Adding a wrap removes line breaks and lines up the elements in all available space.
Step 2: Plan your content reorganization.
Find out what details of the desktop site should be displayed on mobile devices. To do this, answer yourself these questions:
- Which blocks perform only decorative functions? - Most often these are sliders, sidebar decorations, questionnaires, random photos.
- What do visitors ignore? - Heat maps of clicks and paths will help answer this question. We will mercilessly hide the least active elements.
- What must remain in the mobile version? - Usually this is an advertisement, a form feedback, subscriptions or social media buttons.
- Think about how the site should look on tablets, smartphones and small old phones - you can set a different look for each device.
Step 3. Convenience.
Navigation: phone screens are too small; a regular website menu rarely fits into such a frame. It is customary to install a menu that drops down using a button.
Content Area: For phones, it's common to set the body width in CSS to 100%, depending on the available space. This means that text, modules, advertising, and sidebar content will be displayed in one column on small devices.
Sensors: Fingers are not as precise as a mouse, give them plenty of room. The space around links and other active elements must be at least 28 x 28 pixels.
Help your visitors define active space - indents, highlights, color changes and other things that can be set for touches, write a hover pseudo-class for links and buttons.
Implementation of Media Queries with examplesIf you've ever created CSS tables for printing, you already have an idea of the possibilities of assigning individual styles depending on conditions.
Media queries - logical expressions, accessing them implies a response with the parameter true or false. If the query result is true, that is, the user agent or device dimensions match the specified media type, then the style rules specified inside the media block are automatically applied.
Media queries can be assigned according to the following parameters:
- browser window width and height;
- device width and height;
- orientation - landscape or portrait mode;
- screen resolution.
The current list of arguments is available in the official specification.
Let's move on to examples. Eat ready-made template, the size of its content part is 1000 pixels, all internal elements and details are configured in relation to this parameter.
If the user's screen is narrower than the specified content part, a scroll bar will appear. Floating design elements can behave in unpredictable ways - bumping into each other, blurring, or narrowing too much.
First of all, we remove the fixed size that creates the band so that it does not interfere with the settings. In our template, this is the navigation wrapper. In a reader layout, this can be one or more elements. If you find it difficult to determine, open the browser developer tools - using the block model view, find the element that does not fit into the screen dimensions.
To fix this, remove the fixed frames by writing in the template styles:
@media only screen and (max-width: 1000px) (
Nav (width: 100%; )
Now, if the user’s screen width is less than 1000 px, then the width of the menu will be equal to 100% of its size. The main version of the template looks the same as before. Replacing the property removed the bottom scroll bar when shrinking the screen.
But the blocks still look dubious - let's change their display, increasing the width as a percentage to the required size.
We add to the same mediaquery:
Block (width: 35%;)
How to find out the optimal sizes for the blocks of your site? Calculate manually or take any ready-made grid as a basis - fluid grid. You can focus on existing standards: in two-column layouts with a window width of 980-1050px, the wrapper is taken as 95%, the content - 60%, and 30% is left for the sidebar. The remaining space is used to form borders and margins for neatness.
However, you can use box-sizing for the content so as not to calculate pixels every time, but to work according to the overall dimensions.
Let's move on to setting display on screens with lower resolution:
@media only screen and (max-width: 600px) (
Block (
Float:none;
Width:85%;
Margin: 1em auto;
If the screen is less than 600 px, then our blocks should fit into one column - remove the wrappings, set new indents, center and change the width. Most often it is set to 100%, but if for some reason this is inconvenient, we set our own size.
This way you can set not only the dimensions of content blocks, but also their display. For example, prohibit the display of large elements, replacing them with any convenient ones.
Let's demonstrate the possibilities using the example of changing colors and displays.
The smartphone version hides the main menu and turns the block color blue, while the larger screen displays the design without these changes.
Hiding the navigation is required in most cases - it is replaced with a button. It is more appropriate to do this using javascript; you can use ready-made solutions.
Edits are made pointwise, the range can be limited both above and below. It's fast and convenient - in one line you specify separate CSS for different devices without affecting the main view of the site.
You can declare @media rules anywhere inside existing table styles, or create a separate one for these declarations, and then import it into the main CSS using the @import rule.
Mobile version of the site: how to do it and what to pay attention toMediaqueries understand everything modern browsers, but this won't work in IE 8 and below. The problem is solved by turning to old IE using conditional comments. They need to be written in the template code, not in the CSS.
The script itself is available on GitHub (https://github.com/scottjehl/Respond), adds support for minimum and maximum dimensions and media queries to old IE.
Another problem is that responsive design involves the use of Html5, which is again incomprehensible to older browsers. Treated with hack:
Document.createElement("header");
Document.createElement("nav");
Document.createElement("section");
Document.createElement("article");
Document.createElement("aside");
Document.createElement("footer");
The code is written in html; in addition, block display of the created elements is set in CSS:
header, nav, section, article, aside, footer (display:block;)
Let's immediately touch on the question - how to make sure that some scripts are displayed only with the specified screen parameters. If you use jquery, you will need to add to the template code simple script. The numbers change to the required ones. It reads like this: if the window width exceeds 980 pixels, the script specified in the path is applied to the page. You can specify several, the syntax is written by analogy using a semicolon inside curly braces.
If ($(document).width() > 980) (
$.getScript("path to script");
One more point - how mobile browser The iPhone must process the transmitted content, whether its increase is allowed. To do this, an initial scale is written in head:
All that remains is to check the correctness - for this you can use your own browser and phone or turn to services.
If the site is redesigned to local server, correctness can be determined in ami.responsivedesign.is . For correct display, Denver owners will need to change the encoding to utf-8 by editing the server httpd.conf file.
The service will demonstrate what the project looks like on different devices.
Additionally, the template is tested https://developers.google.com/speed/pagespeed/insights/ or in a special form https://www.google.com/webmasters/tools/mobile-friendly, as well as in webmasters.
In Yandex this looks detailed, but Google will simply report that there are no problems.
If everything is done correctly, there will be no scrolling or unnecessary elements. The mobile version is ready, and now you have learned how to make it yourself. If the material was useful to you, then like and subscribe to the blog newsletter. All the best.
Below, by clicking on one of the buttons, you can download 2 examples of the folded page in this lesson and just work with the finished pages and copy the code.
Sincerely, Galiulin Ruslan.
It happens that the mobile version of VKontakte opens, but you need to enter the full version (for computer, regular, web version). How to do this?
You cannot access the full version in the mobile app on your phone. It is best to use a browser on a computer, laptop, or tablet. But you can also use a browser on your phone (Safari, Chrome), but it will be very small and you will have to enlarge it. Here we talk about all the ways to log in to the full version, on all devices.
How to switch to the full versionIf you are currently on mobile (m.vk.com), you can switch from mobile to full mode yourself:
How to open the full version of VK on a computer or tabletClick "Computer version" in the left column of the menu, below (penultimate item):
How to open the full version of VK on your phoneAttention! For mobile application this advice does not apply (an application is a program installed on your phone with the “VK” icon). The full version can be opened in the mobile version of the VK website, which you access through a browser on your phone (for example, Chrome or Safari) at m.vk.com.
You can also open the full version of VK simply by following the link (more on this later).
On a phone, the full version will look small, so you will have to move the image with your fingers to make it larger and get where you need it. But if there is no other device besides a smartphone at hand right now, this is a completely workable solution.
How to quickly open the full version of VKontakteYou can open the full version of VKontakte via home page"Entrance". Open it at the website address, find it VKontakte and click there. You can connect your page using the button "Entrance"(you will need to give access permission) to always see if you have new messages and other events without going online. You can enter the full version of VK with one click on the rectangle "VKontakte" and also quickly open messages, online friends, new comments, etc.
How to open the full version of VKontakte using the linkThe full version of VKontakte can be opened directly using this link: Full version. The full version is also called “regular”, “normal”, “web version”, “computer”, “desktop”.
How can I make sure that the link opens the full version of VK, and not the mobile one?Example.
It was https://m.vk.com/site
It became https://vk.com/site
In exactly the same way, you can correct the address in the browser address bar to open the full version of the same page you are on. You need to click on the address bar, remove the letter m and the period at the beginning, and then click Enter on the keyboard (or button “Go”, “Open” in the browser itself).
Why do you need the full version of VK, why is it better than the mobile one?Only in the full version are all the features of the site available that are not available in the mobile version or in phone applications. For example, creating a request for support agents. In addition, in the full version there are no restrictions when restoring access to the page and, in general, there are much fewer problems with this - especially with attaching photos and entering a confirmation code. It also makes it easier to understand the reasons for blocking a page and unblock it. Therefore, for such matters, we recommend always using the full version of the VKontakte website.
Why is the mobile version opening?This usually happens because someone posted a link like m.vk.com... - that letter “m” at the beginning of the link takes you to the mobile version. It’s just that that person was using his mobile phone and copied such a link from himself. When other people click on it, they end up on mobile. It’s okay, because now you know how to access the full version of VKontakte!
Why doesn't something work in the full version?Most often, if you have problems with the full version of the VKontakte website, it means you have problems with your browser. Clear temporary files, reinstall it, update or install another one.