移动浏览器在较小的屏幕尺寸(移动设备)上显示 768px+ 的断点样式

Mobile Browsers are displaying breakpoint styles for 768px+ on smaller screen sizes (mobile)

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

从桌面 Chrome、FF 和 Safari 中调整屏幕大小时一切正常。然而,Chrome 模拟器和 live(来自我的 Pixel)正在渲染 768px 断点的样式。这可以在这里看到:firstintreeservices.com 来自移动 phone 浏览器。

我已经尝试调整 sass 部分导入顺序,从我的 Webpack 包中完全删除 Bootstrap scss 并连接到 CDN。我仍然找不到解决办法,以前从未遇到过。

注意:我结合使用了Bootstrap的响应实用程序和我自己的响应样式。

更新 这是 GoDaddy URL redirect/masking 问题

可以在 this repository 中找到项目 directory/structure。

<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>

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

在 GoDaddy 社区找到答案 here