問題タブ [device-width]

幅が 1230 程度の既存の (応答しない) サイトを見ています。そのため、モバイル デバイスでは、コンテンツをそのまま圧縮しても、右側が約 10% オフになります。

彼らの電話番号 (携帯電話で圧縮されていても十分に見える大きさ) は右揃えであり、視聴者がスクロールしない限り数字の一部が失われるため、これは悪いことです。

応急処置として、次のように設定できると考えました。

<meta name="viewport" content="width=1235">

しかし、それは私がテストしている電話では無視されます。

私は携帯電話がはるかに小さいビューポート幅に応答することを確認しました.300または何かに設定すると、期待どおりにコンテンツ(左上隅)がズームインされます. ただ、1024 を超えるビューポート セットには応答しません。

iPad の第 4 世代で Web サイトをテストしており、そのピクセル サイズは 2048px x 1536px ですが、768px 以下の「モバイル」メディア クエリ (縦表示) をアクティブにし、「タブレット」メディア クエリ ( 769px と 1024px です。

なぜこれを行うのか興味がありますか？

私は頭の中でこのメタタグを使用しています。これがこれを行っている理由だと確信しています。

文句を言っているわけではありません。これが適切な方法だと思います。なぜそれが機能するのか混乱していますか？1536pxを768pxにする魔法とは？

ここでは、デバイスの幅に応じてメタ タグを設定したいので、問題を詳しく説明します。

現在、モバイル バージョンとフル バージョンを含む Web サイトがあります。モバイル バージョンは、幅が 480px 未満のモバイル デバイスでのみ動作し、フル バージョンは他の幅で動作します。

次のように設定すると、メタタグを設定しようとすると問題が発生します。

私はモバイルでうまく機能し、ウェブサイトはタブレットでズームされて表示されます.

そして、私がこれを使用する場合:

私はデスクトップとタブレットで問題なく動作し、モバイル バージョンがモバイルに表示されないことは確かです。

それで解決策は何ですか、私はヘッダーHTMLにそのようなものが欲しいです:

では、これを行う方法は？

他の人のCSSを編集しています。彼らは、iPad 用に 2 つのメディア クエリ (1 つは縦向き、もう 1 つは横向き) を使用しており、一部の大型の Android フォンやファブレットで問題を引き起こしているようです。

私が非常に奇妙だと思うのは、彼らが使用した CSS が、Android デバイスでは非常に脆弱であるにも関わらず、ほぼすべての人に推奨されていることです。

このクエリは、min-device-width と max-device-width の組み合わせを使用して、デバイスが iPad であることを確認します。'orientation' パラメーターを使用して、デバイスが縦向きか横向きかを判断します (iOS デバイスでは、デバイスが現在横向きであっても、デバイス幅は常に縦向きモードの幅です)。

これは、問題を引き起こしていると思われる CSS です。

ここでの問題は、デバイスの最小幅と最大幅を定義すると、これらのスタイルを他のデバイスにも適用する余地が多く残ることです。幅が 768px から 1024px の間のものはすべて iPad として扱われます。

私の場合、スタイルは、画面の下部にあるカスタム ボタン バーの幅が正確に 768 ピクセルになるように指定しています。そして、そのようないくつかのより多くのもの。これは iPad では機能しますが、幅が似ているが異なるデバイスでは機能しません。関連する Android デバイスの画面からボタンが落ちています。

だから私が今使っているのは：

これは、まさにすべての iPad をターゲットにしているようです。解像度が高くても、すべての iPad の「デバイス幅」は 768 ピクセルであることを理解しました。

だから私はそれを正しくやっていると確信しています。しかし、これはかなり一般的な問題であり、他の誰もが MIN-device-width と MIN-device-height を使用するように言っているので、他の誰かがこれについて聞いてくれることを本当に嬉しく思います.