1

GOAL:
Stylize a chat-interface on mobile devices.

PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.

While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.

Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.

EXAMPLE:
temp.mosaranch.com/chatbot-tester

QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?

mOrloff
  • 2,547
  • 4
  • 29
  • 48
  • What browsers are we talking about here? Safari on iOS for example is (unfortunately for us) bound to behave slightly differently than chrome on desktop – stelioslogothetis Sep 26 '17 at 20:01

1 Answers1

0

You need a viewport meta tag in order for media queries to work properly on mobile devices.

Read more at MDN:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42