2

I am creating an admin area using Bootstrap. When I resize my screen via dragging it and making it smaller, the website looks exactly how I would expect:

enter image description here

However when I view it on mobile it zooms out and looks like it tries to show the whole screen. Like below

enter image description here

Has anyone experianced this issue before with Bootstrap? I'm thinking it could be a Javascript issue where it doesn't detect the size of the browser?

andreas
  • 16,357
  • 12
  • 72
  • 76
N P
  • 2,319
  • 7
  • 32
  • 54

2 Answers2

10

Use

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

in the <head> section of your HTML document.

This means that the browser will (probably) render the width of the page at the width of its own screen.

— Chris Coyer on CSS-Tricks

You can check MDN for more information about the viewport meta tag and its usage.

andreas
  • 16,357
  • 12
  • 72
  • 76
-1

please set this meta tag in tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
GMKHussain
  • 3,342
  • 1
  • 21
  • 19
  • 2
    It's not a good idea to stop the user from being able to scale/zoom when using mobile devices, as some people may not be able to see your site easily if they're restricted to a certain zoom level. – Lee Feb 07 '17 at 09:55