响应式网站的初始视口缩放在移动设备上不正确答案

【问题标题】：Responsive site's initial viewport zoom is incorrect on mobile响应式网站的初始视口缩放在移动设备上不正确
【发布时间】：2019-08-17 06:39:58
【问题描述】：

我的响应式网站在移动设备上的初始缩放不正确：

示例 HTML 如下（在此直播中 Codepen demo）。

你可以看到我已经在使用<meta name="viewport" content="width=device-width, initial-scale=1">了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            .ctaGrabber{
                word-wrap: break-word;
                font-size: 30px;
                font-weight: bold;
                border: 1px solid rgba(0,0,0,0.2);
                border-radius: 0px;
                padding-left: 30px !important;
                padding-right: 30px !important;
                padding-top: 20px !important;
                padding-bottom: 20px !important;              
            }
        </style>
    </head>
    <body class="">
        <div class="container mainContainer hideWhenShowingForm">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1>“Here is a great title about a whole bunch of cool stuff”</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 text-center presenters">            
                    left col
                </div>
                <div class="col-md-6 text-left">
                    <div class="text-center">
                        <a href="#" class="btn btn-lg btn-primary ctaGrabber" data-hiddenForm="#hiddenCrmForm">
                            <span>YES! Watch The Training Now!</span>
        <!--                    <span class="elButtonSub" style="font-size: 14px; display: block;"></span>-->
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

为什么我的a.ctaGrabber 按钮的字体大小不会导致移动“缩放”变宽？

我怎样才能强制视口缩放因子来支持这个大字体大小或换行按钮文本（无需我指定按钮宽度）？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

啊，我想通了：

我需要将white-space: normal; 添加到我的.ctaGrabber 样式，以覆盖Bootstrap 的buttons.less 文件中.btn 的white-space: nowrap; 样式。

更新：

缩小导致水平滚动条的元素的方法是使用检查面板并一次删除一个元素。

然后，一旦你找出了有问题的元素，一次删除/编辑一个 CSS 属性。

就我最近的情况而言，我发现 img 正在使用 Bootstrap img-responsive 类，但也有 max-width: 450px;，它覆盖了 Bootstrap 的 max-width: 100%;。解决方案 (https://stackoverflow.com/a/50194061/470749) 是使用此类将 img 包装在 div 中：

.imgMaxWidthWrapper{
    max-width: 450px;
    margin: auto;
}

【讨论】：