2017-09-26 6 views
1

ゴール:
モバイルデバイスでチャットインターフェイスのスタイルを設定します。モバイルブラウザが縮小されたPCブラウザとは異なるレンダリングを行う原因はありますか?

問題:
私はチャットボットのために一緒に概念実証を投げました。 JS & CSSを含むすべてが非常にシンプルです。私はa separate issue with JS (i think)も持っていますが、これは私のCSSの問題です。

開発中、私はFF & Chromeでテストし、ブラウザを縮小してモバイルブラウザの体験をエミュレートしました。
すべてのCSSメディアクエリが期待どおりに動作しました。

我々はテスト任意のモバイルデバイス上の

しかし...、CSSメディアクエリで指定されたサイズは効果がありませんし、我々はズームインしたままにしている

例:
temp.mosaranch.com/チャットボット-テスター

QUESTION:
ないにモバイルブラウザを引き起こす可能性がありますどのようなRULながら、特定のメディアクエリーCSSルールをレンダリングデスクトップのブラウザで縮小すると、になりますか?

+0

我々がここで何のブラウザを話していますか? iOS上のSafariはデスクトップ上のクロムと少し違った振る舞いをする(残念なことに私たちのために) – stybl

答えて

0

メディアクエリがモバイルデバイス上で正常に動作するためには、ビューポートメタタグが必要です。

よりMDNで読む:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

典型的なモバイルに最適化されたサイトは、以下のようなものが含まれています
<meta name="viewport" content="width=device-width, initial-scale=1">

+0

ビンゴ!それはそれだった。 – mOrloff

関連する問題