Foundation 6 mediaquery на iphone - PullRequest
Новая
       33

Foundation 6 mediaquery на iphone

0 голосов
/ 30 августа 2018

Мой тест очень прост, как эта веб-страница ниже. Я не понимаю, почему на 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>

Результат - средний любой изгиб сетки или x-y сетки. Я использую sass для своего проекта, но для этого теста я использую напрямую полный официальный файл cdn. Я все еще получаю тот же результат.

...