Solved

Keep mobile users from being able to zoom in with Bootstrap

Posted on 2016-09-11
5
228 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 9

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 9

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

Automating Your MSP Business

The road to profitability.
Delivering superior services is key to ensuring customer satisfaction and the consequent long-term relationships that enable MSPs to lock in predictable, recurring revenue. What's the best way to deliver superior service? One word: automation.

Question has a verified solution.

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

Suggested Solutions

A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

710 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