133

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?

Improve this question
2
  • 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. Commented Jan 13, 2013 at 14:38
  • Here's a quick way to check your device's current (virtual) viewport settings: whatismyviewport.com Commented May 4, 2023 at 11:23

4 Answers 4

Reset to default
357

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

It can work on browser without this line but on mobile it just needs this line.
make sure the production index.html actually includes the tag as well as development index.html
@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.
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.
i have add this line but mobile view are no responsive
|
8

I have also faced this problem. Finally I got a solution. Use this bellow code.

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

Comments

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" />
Improve this answer

Comments

2

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">
Improve this answer

Comments