私は、部分的に重いコンテンツがたくさんある素晴らしい雑誌のモバイル サイトを構築しています。ここでの問題は、モバイル サイトの右側の列全体を非表示にする必要があることです (はい、この場合は必要です)。
私はモバイル デザインについて十分な調査を行い、多くの記事を読みましたが、この問題に対処する解決策が見つかりません。CSS や JS で右側の列を非表示にするのが一般的です。しかし、すべてがまだロードされています。この場合、右側の列が非常に大きく、多くのコンテンツが含まれているため、ページの読み込みを高速化するには、この列を読み込まない方がよいようです。
私は何をすべきか？
バックエンドでユーザーのブラウザーを検出し (PHP を使用していると仮定します)、サイトの右側の列を読み込むかどうかを決定する単純な制御構造を作成できるはずです。
以下に、役に立つと思われるライブラリをいくつか示します (当然のことながら、このような些細な作業のために車輪を再発明する必要はありません)。
モバイル ユーザーがそのコンテンツを表示できなくても問題ないと思われる場合は、ロードしないでください。モバイル デバイスをチェックするための php クラスがあり、それに基づいて、コンテンツの一部を読み込まないようにすることができます。問題が 1 つあります。php クラスは、ブラウザのサイズではなく、ユーザー エージェントの設定にしか基づいていないため、理論的には、高解像度のモバイル デバイスを使用している人はそのコンテンツを見ることができません。
私の頭の中のもう1つのアイデア-phpでコンテンツをロードすることはできませんが、一般的なコンテンツがロードされた後、jsビューポート幅をチェックインし、十分な場所がある場合は最終的にコンテンツの一部をajaxでロードします.
要約すると、私たちはあなたのサイトのコンテンツを把握していないため、コンテンツの一部をまったく表示しない余裕があるかどうかを判断するのはあなた次第です (モバイル デバイスの場合)。この場合、解像度が変更されても、ユーザーはそれを見ることができません (つまり、デバイスの位置を水平から垂直に変更します)。もちろん、この場合、ページの読み込みが速くなります。これは、モバイル インターネット接続にとっても重要です。