Адаптивная ширина слишком мала на телефоне, но все равно в настольном браузере

Я практикую отзывчивый веб-дизайн. Из того, что я узнал до сих пор, он вращается вокруг флюидной сетки с жидкостными компонентами и запросов СМИ CSS.

Веб-сайт выглядит так же, как я хочу, чтобы он выглядел на мобильном телефоне, когда я сжимаю свой браузер:

браузер

Однако, когда на моем мобильном телефоне, после того, как я надел его на свой веб-сервер, он выглядит совершенно иначе:

введите описание изображения здесь

Я думаю, что существует некоторый конфликт между шириной и шириной устройства. Кто-нибудь знает, что происходит не так?

Вот как я загружаю таблицы стилей:

  

Нет метаданных без метаданных viewport

  

Подробнее о метатеге viewport https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag