Question

期望的行为

检查用户的浏览器是否支持flexbox并执行相关处理。

我尝试过的事情

我正在考虑将Modernizr与Flexbox和Flex Line Wrapping检测一起使用，即：

JS

$(document).ready(function() {

    if (Modernizr.flexbox && Modernizr.flexwrap) {
        console.log("flexbox is supported");
    } else {
        console.log("flexbox is not supported");
    }

});

CSS

.no-flexwrap .box { color: red; }
.flexwrap .box { color: green; }

要安装Modernizr I：

取消选择了minified选项
选择了那些detects
单击Build并将文件另存为

src/js/modernizr_flex_check.js。

已下载文件顶部的注释为：

/*!
 * modernizr v3.6.0
 * Build https://modernizr.com/download?-flexbox-flexwrap-setclasses-dontmin
 ....
*/

我通过以下方式将该文件导入了/src/js/common.js：

import Modernizr from './modernizr_flex_check';

我使用以下设置运行了Webpack构建，并成功完成：

webpack.config.json

rules: [{
        test: /\.js$/,
        use: {
            loader: "babel-loader",
            options: {
                presets: ["env", "stage-0"]
            }
        }
    },

.babelrc

{
    "presets": [
        "env",
        "stage-0"
    ]
}

在我知道支持flex的环境中加载页面时：

Windows 10 Professional, Chrome Version 69.0.3497.100 (Official Build) (64-bit)

我的条件检查返回了：

flexbox is not supported

但是<html>标签是：

<html lang="en" class=" flexbox flexwrap">

更新：

如果我将其删除：

import Modernizr from './modernizr_flex_check';

直接将其包含在我的index.html文件中：

<script src="/js/modernizr_flex_check.js"></script>
<script src="/js/bundle.js"></script>

然后条件返回正确的结果并将类应用于<html>标记：

<html lang="en" class=" flexbox flexwrap">

因此，在尝试导入并在其上运行webpack时似乎出现了问题。

更新2：

此外，它在{中说flexbox is supported

iOS, v7
Safari

但是我发现直到Safari v9才支持它：

https://caniuse.com/#feat=flexbox

（在我的情况下，带有webkit前缀的部分支持无效）

Modernizr Webpack没有返回正确的Flexbox检测结果

0 个答案: