Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Keep mobile users from being able to zoom in with Bootstrap

Posted on 2016-09-11
5
Medium Priority
?
315 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 10

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 10

Accepted Solution

by:
Paweł earned 1000 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 1000 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

Threat Trends for MSPs to Watch

See the findings.
Despite its humble beginnings, phishing has come a long way since those first crudely constructed emails. Today, phishing sites can appear and disappear in the length of a coffee break, and it takes more than a little know-how to keep your clients secure.

Question has a verified solution.

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

Ransomware is a growing menace to anyone using a computer or mobile device. Here are answers to some common questions about this vicious new form of malware.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

877 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