Solved

Keep mobile users from being able to zoom in with Bootstrap

Posted on 2016-09-11
5
156 Views
Last Modified: 2016-09-15
I am working out of Bootstrap and I want to prevent mobile users from being able to zoom in.

I have the following meta tag added
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
but they can still zoom in.
0
Comment
Question by:burnedfaceless
  • 2
  • 2
5 Comments
 
LVL 8

Expert Comment

by:Paweł
ID: 41793454
yes you have to set it in the meta tag of your html

check this link out
http://getbootstrap.com/css/#overview-mobile

"You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!"
0
 

Author Comment

by:burnedfaceless
ID: 41793566
I have it in my meta tag but it still zooms in.

Do mobile browsers just regard this tag nowadays?
0
 
LVL 8

Accepted Solution

by:
Paweł earned 250 total points
ID: 41794229
Just tried it in google chrome with the device option on and it prevented zooming, so i guess it just depends on the mobile browser your'e using.

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<html>

<head>
    <title>Dashboard</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="style/MeetingDrillDown.min.css" rel="stylesheet" />
    <link href="style/Dashboard.min.css" rel="stylesheet" />
</head>
0
 
LVL 3

Assisted Solution

by:pradeep kumar
pradeep kumar earned 250 total points
ID: 41797588
Try something like this:
  <meta name="viewport" content="width=device-width, initial-scale=0, maximum-scale=0, user-scalable=no">
0
 

Author Closing Comment

by:burnedfaceless
ID: 41800301
Yea couldn't get it to work.

Thanks for trying.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
With the rapid rise in mobile usage, mobile devices are here to stay and have become an integral part of doing business. Here are 9 great apps for your BYOD environment.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now