Question

我的测试非常基本，就像下面的此网页一样。我不明白为什么在iPhone 6或5 Foundation上似乎无法正常工作。你有什么主意吗？

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
    <div class="grid-x grid-margin-x">
        <div class="cell">
            <div id="info"></div>
            <div id="info2"></div>
            <div id="info3"></div>
            <div id="info4"></div>
            <p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
            <p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
            <p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
            <p class="show-for-landscape">You are in landscape orientation.</p>
            <p class="show-for-portrait">You are in portrait orientation.</p>
        </div>
    </div>
</div>
<script>
    $(document).foundation();
    $(document).ready(function(){
        $("#info").html($( window ).width());
        $("#info2").html(JSON.stringify(Foundation.MediaQuery.queries));
        $("#info3").html(Foundation.MediaQuery.current);
        $("#info4").html(window.devicePixelRatio);
    });
</script>
</body>
</html>

结果是中等大小的flex网格或x-y网格。我将sass用于我的项目，但对于此测试，我直接使用完整的官方CDN文件。我仍然得到相同的结果。

iPhone上的Foundation 6 MediaQuery

0 个答案: