移动浏览器在较小的屏幕尺寸（移动）上显示 768px+ 的断点样式答案

【问题标题】：Mobile Browsers are displaying breakpoint styles for 768px+ on smaller screen sizes (mobile)移动浏览器在较小的屏幕尺寸（移动）上显示 768px+ 的断点样式
【发布时间】：2018-08-24 21:22:04
【问题描述】：

移动浏览器（chrome、ff、safari）在我的手机上为平板电脑大小的断点显示网站样式？我正在使用Bootstrap 4 以及一些自定义样式。

从桌面调整屏幕大小时，Chrome、FF 和 Safari 中的所有内容都可以正常工作。然而，Chrome 模拟器和 live（来自我的 Pixel）正在渲染 768px 断点的样式。这可以在这里看到：firstintreeservices.com 来自手机浏览器。

我尝试调整 sass 部分导入顺序，从我的 Webpack 包中完全删除 Bootstrap scss 并连接到 CDN。我仍然找不到解决方案，之前从未遇到过。

注意：我正在使用 Bootstrap 的响应式实用程序和我自己的响应式样式的组合。

更新这是一个 GoDaddy URL 重定向/屏蔽问题

项目目录/结构可以在this repository找到。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap v4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom Styles & Overrides -->
<link rel="stylesheet" href="styles/custom.css">

<title>First In Tree Services</title>
</head>

【问题讨论】：

标签： css google-chrome firefox webpack twitter-bootstrap-4

【解决方案1】：

这是一个 GoDaddy URL 重定向 + 屏蔽问题。

在 GoDaddy 的社区 here 中找到答案。

【讨论】：

【解决方案2】：

据我在您链接到的网站 (http://firstintreeservices.com/) 中看到的，这里没有像您的代码那样的元视口。

&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

【讨论】：

我刚刚了解到屏蔽的 GoDaddy 重定向仅加载站点桌面版本。它不会像预期的那样使用 DNS 重定向。