Mobile-friendly уравнения не отображаются на iPad

[Batmaev]

Если зайти с iPad на calculus.mathbook.info и пролистать до Примера 3, то формулу для множества B мы не увидим:

Но если перевернуть планшет горизонтально, то нужная формула появится:

Почему так происходит:

На странице в этом месте расположено два уравнения: long-eq и splitted-eq.

Если ширина экрана <= 768px, то на long-eq вешается свойство display: none. Если ширина экрана >= 768px, то это свойство вешается на splitted-eq.

https://github.com/ischurov/qqmbr/blob/d6a1ff0634018ff8195af30a8888d669d6f3ae48/qqmbr/templates/preview.html#L365-L381

И так совпало, что у айпадов ширина экрана ровно 768px. То есть display: none вешается на обе версии уравнения и пользователю не показывается ничего.

Possible fix

    @media screen and (max-width: 768px) {
        .long-eq {
            display: none;
        }
    }

    @media not screen and (max-width: 768px) { 
        .splitted-eq {
            display: none;
        }
    }

Отмечу, что следующее медиавыражение тогда должно оказаться ненужным:

https://github.com/ischurov/qqmbr/blob/d6a1ff0634018ff8195af30a8888d669d6f3ae48/qqmbr/templates/preview.html#L371-L375

Можете также вдохновиться этим stackoverflow.com/questions/41449476/media-queries-running-weird-because-of-non-integer-width

[ischurov]

Боже, как сложно жить! iPad-то я и не проверил. Спасибо за подробный репорт! Я только пока не совсем понял, как должен работать фикс. Вроде после него получается, что если экран широкий (больше 768 пикселей), то будут отображаться и широкие и узкие формулы. Или я совсем не понимаю, как эти селекторы работают…

[Batmaev]

В фиксе есть два одинаковых медиавыражения, которые отличаются оператором not. Поэтому всегда выполнится или одно выражение, или другое.

Отмечу, что not делает отрицание всего выражения целиком.

Рассмотрим второй медиа-запрос:

not (max-width: 768 px)    <=>
not (width <= 768 px)      <=>
width > 768 px

[Batmaev]

Впрочем, можно придумать более простое решение, например, использовать в одном медиа-запросе 768px, а в другом — 769px:

@media screen and (max-width: 768px) {
    .long-eq {
        display: none;
    }
}
@media screen and (min-width: 769px) { 
   .splitted-eq { 
       display: none; 
   } 
} 

Тогда широкие и узкие формулы будут отображаться одновременно, если экран имеет дробную ширину строго больше 768 и строго меньше 769 пикселей. Можно понадеяться, что такая ситуация не встретится, а если встретится — то две формулы лучше, чем ни одной.

[ischurov]

Спасибо! Я долго думал, в чём подвох, но не сообразил, что and имеет более высокий приоритет и not применяется ко всему выражению.