Responsive layouts not working on mobile phone

[dbrowne24]

Bug report

Describe the bug

I have created a next js application. I have used both semantic ui and bootstrap to create some simple responsive layouts in pages/index.js

These layouts are pretty much just some grids that should collapse on smaller screens such as mobiles.

I have deployed the app to a server. I'm using pm2 to manage the app and nginx as a reverse proxy.

Everything works perfectly on a computer. You can shrink the screen and at the breakpoint the grids collapse the way that they should. If you shrink the browser and load the app it looks perfect.

However when I access the site from my phone's web browser (chrome) it does not collapse. So everything looks very small and squashed.
My phone is a samsung galaxy A5 (android)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a basic next application with either bootstrap or semanti-ui-react
2. Deploy the application to a server
3. Use pm2 to manage the application
4. Use nginx to reverse proxy
5. Access the application from a mobile phone (android at least)

Here is a repo to the code I have deployed:
https://github.com/dbrowne24/bootstrap-nextjs-issues

This example uses bootstrap, but the same thing happens when using semantic-ui-reacts responsive layouts.

Expected behavior

Expected the responsive layout to work on both mobile and desktop.

Screenshots

Here are some screen shots that might help:

Computer Full Screen:

Computer Window shrank:

Mobile Phone (no responsiveness)

System information

• OS: Ubuntu 18.04 and Android
• Browser Chrome on both
• Version of Next.js: 6.1.2

Additional context

Add any other context about the problem here.

[timneutkens]

This is not a Next.js bug. You probably forgot to add the viewport meta tag:

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

[Nahueleti]

had a similar issue, @timneutkens pointed in the right direction, thanks a bunch!

[timneutkens]

🙏 this bites a lot of people doing responsive websites unfortunately 😅

[DiegoVallejoDev]

How can I add meta tags in nextjs?

[whoyawn]

@Destructor1702 https://nextjs.org/docs#populating-head