131

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,555
  • 31
  • 31
  • 45
Tadas Davidsonas
  • 1,859
  • 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
  • Here's a quick way to check your device's current (virtual) viewport settings: https://whatismyviewport.com/ – djvg May 04 '23 at 11:23

4 Answers4

349

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.

djvg
  • 11,722
  • 5
  • 72
  • 103
Agush
  • 5,036
  • 1
  • 19
  • 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. – vighnesh153 Nov 04 '19 at 10:05
  • 1
    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
  • 2
    i have add this line but mobile view are no responsive – Junaid khan Aug 27 '21 at 09:56
  • I have the same issue, works on desktop but not on my mobile device and I have the meta tag as it should be and my media queries in my css. Still cant seem to find a reason for it not to work on the production webpage – Wanz Aug 24 '22 at 09:38
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
  • 332
  • 6
  • 15
5

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
  • 556
  • 9
  • 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
  • 861
  • 8
  • 16