Медиа-запрос не работает на мобильном телефоне, отлично работает на ноутбуке - PullRequest
Новая
       51

Медиа-запрос не работает на мобильном телефоне, отлично работает на ноутбуке

0 голосов
/ 31 марта 2020

Я видел много раз ответ на этот вопрос в переполнении стека. Кажется, что мой медиа-запрос работает нормально на моем ноутбуке, используя Chrome, но он не работает на моем мобильном устройстве. В каждом ответе SO говорится, что этот заголовок должен быть включен в заголовок: 

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

У меня он есть в заголовке (используется Pug), и он все еще не работает на моем мобильном устройстве. Кто-нибудь знает, что может быть причиной этого?

На ноутбуке: alt text

На мобильном телефоне: alt text

Заголовок 

html
  head
    title My site
    meta(name="description" content="A cool thing made with Glitch")
    link#favicon(rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon")
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css")
    link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous")
    link(rel="stylesheet" href="/layout.css")

    block extralink
    block extrascript

    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")

. css

@media (max-width: 767px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        content: attr(data-before);
    }
}
...