`shrink-to-fit=no` is not needed anymore - Apple removed the need for it from iOS9.3 onwards
See https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html and https://github.com/h5bp/html5-boilerplate/issues/2102
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Plugin Test Suite</title>
<!-- jQuery -->
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Alert</title>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Button</title>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Carousel</title>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Collapse</title>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Dropdown</title>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Modal</title>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Popover</title>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Scrollspy</title>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Tab</title>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Toast</title>
<style>
<html lang="en">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Tooltip</title>
<style>
<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ page.description | default: site.description | smartify }}">
<meta name="author" content="{{ site.authors }}">
<meta name="generator" content="Jekyll v{{ jekyll.version }}">
<html lang="en"{% if page.html_class %} class="{{ page.html_class }}"{% endif %}>
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="{{ site.authors }}">
<meta name="generator" content="Jekyll v{{ jekyll.version }}">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
{% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
{% endhighlight %}
You can see an example of this in action in the [starter template](#starter-template).