129

I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.

What could be the wrong?

General Grievance
  • 4,259
  • 21
  • 28
  • 43
Tadas Davidsonas
  • 1,809
  • 4
  • 16
  • 19
  • 1
    You're going to have to add more info and code for anyone to be helpful. Your CSS, HTML, etc. What framework (such as Twitter Bootstrap) you're using, if any, etc. – ajacian81 Jan 13 '13 at 14:38

4 Answers4

338

You are probably missing the viewport meta tag in the html head:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Without it the device assumes and sets the viewport to full size.

More info here.

Agush
  • 4,916
  • 1
  • 18
  • 32
  • 3
    It can work on browser without this line but on mobile it just needs this line. – Tadas Davidsonas May 28 '14 at 14:21
  • 3
    make sure the production `index.html` actually includes the tag as well as development `index.html` – halafi Mar 04 '18 at 09:56
  • @FilipHalas that is it. My production index.html was rendering my actual index.html in an iframe. And the production's index.html didn't have the meta tag. Adding it there fixed it. – Vighnesh Raut Nov 04 '19 at 10:05
  • I've been doing web for quite a few years now and always did this automatically, today I forgot to put the tag and couldn't figure out why my web wasn't showing the responsive queries for que screen size, and 1 quick search I got my answer here, hahaha feel so dumb this happened. – BDB88 Jun 03 '21 at 21:21
  • 1
    i have add this line but mobile view are no responsive – Junaid khan Aug 27 '21 at 09:56
7

I have also faced this problem. Finally I got a solution. Use this bellow code. Hope: problem will be solve.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Saiful Islam
  • 323
  • 5
  • 14
4

Though it is answered above and it is right to use

<meta name="viewport" content="width=device-width, initial-scale=1">

but if you are using React and webpack then don't forget to close the element tag

<meta name="viewport" content="width=device-width, initial-scale=1" />
Shadab Ahmed
  • 498
  • 7
  • 20
1

Responsive meta tag

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Marcelo Austria
  • 803
  • 8
  • 16