Solved

Keep mobile users from being able to zoom in with Bootstrap

Posted on 2016-09-11
5
135 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 48
jQuery Scroll on Mobile devices 1 21
Bootstrap 3 and Angular 2 12 23
Bootstrap input box width 2 13
You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

708 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

17 Experts available now in Live!

Get 1:1 Help Now