Веб-сайт выглядит странно на мобильном телефоне

Question

My website выглядит странно на моем Nexus 5 (см. Рисунок ниже). Хотя я не могу проверить это, я думаю, что это то же самое для других мобильных телефонов. Я думаю, это из-за запросов @media. Однако, если я попробую это на обычном ПК с разной шириной экрана, похоже, что это должно быть.

Два вопроса:

• , как я могу это исправить?
• Есть ли способ проверить это поведение на моем компьютере, поэтому я могу использовать firebug, чтобы увидеть css?

Это как @media запросов выглядеть в моем CSS файл:

@media (min-width: 600px) { 
    .col-lg-3 { 
    width: 50%; 
    float: left; 
    } 
} 

@media (min-width: 900px) { 
    .col-lg-3 { 
    width: 33.33%; 
    float: left; 
    } 
} 

@media (min-width: 1000px) { 
    .col-lg-3 { 
    width: 25%; 
    float: left; 
    } 
} 

@media (min-width: 1000px) { 
    .container { 
    max-width: 980px; 
    } 
} 

.container является белая коробка с тенью, и .col-LG-3 являются коробки продукта (4 строки на обычном экране). . Контейнер должен заполнить экран на маленьких экранах и шириной 980 пикселей на большом экране. Тем не менее, он выглядит намного меньше, и это выглядит как .col-LG-3 имеет ширину 100%

Answer 1

Чтобы разработать @zazvomiki, вы можете исправить это поведение, выполнив метатег viewport и указав, что ширина видового экрана должна быть равна ширине экрана. Поместите следующее в элемент вашего веб-страницы:

<meta name="viewport" content="width=device-width, user-scalable=no"> 

Чтобы ответить на вторую часть вашего вопроса вы можете проверить это поведение на вашем компьютере, вы можете использовать удаленную отладку с Chrome для Android, которая позволяет использовать инструменты для разработчиков с вашего ПК, чтобы исследовать страницу на вашем телефоне. Затем вы можете делать живые изменения, как обычно, в Chrome, чтобы протестировать разные идеи.

Удаленная отладка для Chrome: https://developer.chrome.com/devtools/docs/remote-debugging

Answer 2

Chrome имеет очень хорошие инструменты эмуляции для мобильных устройств, встроенных в инструменты разработчика. См. https://developer.chrome.com/devtools/docs/device-mode

Подменю UL также определило ширину, так что это может привести к тому, что панель меню будет вынуждена шире, чем контейнер. Проверьте пробелы в тексте меню.