У меня есть мой веб-сайт, и я делал его адаптивным, используя смесь начальной загрузки, основы и w3.css. Чтобы проверить, работает ли он на маленьких экранах, я изменил размер окна браузера на своем ноутбуке, чтобы имитировать мобильное устройство. Он работал нормально, и теперь я опубликовал свой сайт. Однако я пришел протестировать его на своем iPod touch 5 (который имитирует устройство Apple), и он не показывает отзывчивую версию. Я тоже пробовал его на своем телефоне Android, и он не реагирует. Однако я пробовал его на телефоне с Windows, и он отлично работает. Я не полагался на технологию, которая определяет, на каком устройстве вы находитесь, только на ширину экрана. Думаю, проблема может быть связана с разрешением экрана. Вот CSS, который управляет моим сайтом:

@media (max-width: 767px)
{
    .navbar-default .navbar-nav .open .dropdown-menu > li > a
    {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus
    {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus
    {
        background-color: #0089ff;
        color: #ffffff;
    }
}
@media (min-width: 767px)
{
    body
    {
        padding-top: 230px;
    }
    ul.nav li.dropdown:hover ul.dropdown-menu
    {
        display: block;
    }
}
@media (max-width: 767px)
{
    body
    {
        padding-top: 130px;
    }
}
@media (min-width: 768px)
{
    #resize
    {
        width: 30%;
    }
}
@media (min-width: 768px)
{
    #alignp
    {
        text-align: center;
    }
}

Как я уже сказал, я использовал его вместе со всеми стандартными версиями bootstrap, foundation и w3.css. Я надеюсь, что вы можете помочь.

1
user5832974 19 Фев 2016 в 11:55

2 ответа

Лучший ответ

Вам нужно иметь это в голове <meta name="viewport" content="width=device-width, initial-scale=1.0">. В Chrome также есть режим устройства, в котором вы можете моделировать различные устройства.

1
sTx 19 Фев 2016 в 09:18

Вы всегда можете протестировать его на другом устройстве в своем браузере. проверьте расширение Ripple для Google Chrome. это действительно полезное расширение.

https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

0
pureevill 19 Фев 2016 в 09:07