マークアップを変更したり JS を含めたりできないサイトのテーマを作成しています。テーマの CSS しか制御できず、HTML をページ本文内にのみ記述できます。
このテーマをレスポンシブにしようとしていますが、次のようなビューポート メタ タグがないと、ハンドヘルド デバイスで初期スケールまたはページ ズームを制御する方法がわかりません。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
そのため、CSS@media
クエリを使用してモバイル固有のレイアウトを適用することはできますが、電話で表示するとサイトが縮小されます。ズームインするまではテキストと画像が小さすぎます。ズームインすると、レイアウトが大きすぎて水平スクロールバーが表示されます。デスクトップのサイズ変更されたブラウザウィンドウ内では完璧に見えます。問題は、電話のブラウザーがページを自動的にスケーリングすることです。
だから私は回避策を探しています。私は現在、2 つの考え方を持っています。他の提案を歓迎します。
- ビューポート メタ タグが CSS だけで行うことを行う方法はありますか?
- モバイル ブラウザーがページを拡大縮小しないように、モバイル固有のスタイル設定で最大ページ幅を強制することはできますか?