1 Тема від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1267

Тема: UIkit CSS framework - є питання

Чому не працює зміна ширини контейнера при перегляді  з мобільного?
тобто - чому не відбувається виконання uk-width-small-1-1, хоча при зміні ширини браузера - працює.

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css"/>
    <link rel="stylesheet" href="{% static 'quiz/css/quiz.css' %}"/>
</head>
<body>
<div class="uk-grid">
    <div id="container" class="uk-width-large-7-10 uk-width-medium-9-10 uk-width-small-1-1 uk-container-center">
        <header>
            ... code  scipped
        </header>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
        <footer>
              ... code  scipped
        </footer>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js"></script>
    <script type="text/javascript" src="{% static 'quiz/js/quiz.js' %}"></script>

</div>
</body>
</html>

код вживу - http://debos.net/

Подякували: 221VOLT1

2 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 506
    • Репутація: 824

Re: UIkit CSS framework - є питання

Виконується правило 7-10, так як воно нижче знаходить в css (рядок 847)

@media (min-width: 960px) 
.uk-width-large-7-10 {
    width: 70%;
}

Натомість

@media (min-width: 480px)
.uk-width-small-1-1 {
    width: 100%;
}

на рядку 659

karmeljuk вебсайт

3 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1267

Re: UIkit CSS framework - є питання

karmeljuk написав:

Виконується правило 7-10, так як воно нижче знаходить в css (рядок 847)

@media (min-width: 960px) 
.uk-width-large-7-10 {
    width: 70%;
}

Натомість

@media (min-width: 480px)
.uk-width-small-1-1 {
    width: 100%;
}

на рядку 659

яке вона має право діяти, якщо пристрій, яким  переглядаю, має 412 х 732 (nexus 5x)?
пристрій емулюю в chrome , хоча, якщо дивитися через реальний телефон - картина та сама.

4 Відповідь від ping Востаннє редагувалося ping (16.12.2016 14:13:56)

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1267

Re: UIkit CSS framework - є питання

вроді є відповідь
вірніше - слід у напрямку, бо не тільки у мене це виникло питання:
https://github.com/uikit/uikit/issues/2109

I cannot make uk-hidden-small work on mobile. It perfectly work on desktop when decreasing the size of the window, perfectly works on jsfiddle (https://jsfiddle.net/prtome/947dmmmn/)
but if you put this code and access the page on a mobile, or through the developers tools of google, you'll see that it never takes into account the uk-hidden-small
.....
it is a bug in this version and must be solved
.....

5 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: UIkit CSS framework - є питання

не читав про фреймворк але точно знаю що для правильної роботи @media query потрібно в хеад додати

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Подякували: ping1

6 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1267

Re: UIkit CSS framework - є питання

Key написав:

не читав про фреймворк але точно знаю що для правильної роботи @media query потрібно в хеад додати

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

ви праві.

додав:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

і  - працює.

чомусь не знайшов у документації фреймворка жодної згадки про це :(