Setting viewport

When opening non responsive website, mobile phones present the "zoom out" version of the webpage which means that user doesn't heve to swipe right and left. In this case mobile browser acts as a desctop browser and user just see the whole condensed view. Portable devices such as mobile phones and tablets have small screen and during navigation in already responsive website our media queries should enable the mobile browser to scale a webpage (necessary container) and fit it to its screen.

While optimizing website for mobile we should use the Viewport which is a HTML meta tag created to control the layout on mobile browsers thus letting us to escape from "zoom in" function. Here is a simple example of viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> You should include the viewport declaration into <head> tag in the HTML.

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
</head>

Viewport has several properties:

  • Width
  • Height
  • Initial Scale
  • Minimum Scale
  • Maximum Scale

Make my existing website responsive - request form

 
1 Start 2 Complete

If you don't have web development skills, just fill in the form below. Our specialists will make your website responsive.