Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Keep mobile users from being able to zoom in with Bootstrap

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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

A new Acronis survey shows people often have conflicting thoughts about data protection.
Today’s effective marketing is about coming down to the customers’ level and engaging in a whole new way. A text message is one of the most effective and influential ways that you can engage your customers. Here are eight ways that you can utilize t…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

704 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