Webサイトでスマートフォン機能を有効にする方法

モバイルデバイスを介したインターネットの使用は、Apple iPhoneの発売以来増え続けています。 モバイルデバイスの画面サイズとタッチスクリーンインターフェイスが異なるため、Webサイトはモバイルデバイスに表示されたり機能したりしますが、コンピュータの画面に表示されたり機能したりすることはありません。 読者を維持するために、カスケーディングスタイルシートを使用してあなたのウェブサイトのスマートフォン版を作成してください。

スマートフォン閲覧の制限

スマートフォンの閲覧は、コンピュータベースの閲覧と2つの重要な点で異なります。 まず、スマートフォンの利用可能な画面サイズは、コンピューターの画面サイズよりはるかに小さいため、一部のWebサイトはスマートフォン上で雑然としているか、場合によっては判読できないように見えます。 スマートフォンユーザーは、コンピュータの表示に最適化されているWebサイトをスクロールダウンまたはズームインする必要があります。 第二に、スマートフォンはカーソルの動きではなくタッチクリックに反応するため、カーソルの動きに基づいて変化するWebサイトの要素はスマートフォンで問題になる可能性があります。 たとえば、カーソルを移動したときに変化する要素は、ホバーしてもスマートフォンでは何も起こらないため、スマートフォンでは望みどおりに動作しません。 また、ドロップダウンメニューは一部のスマートフォンユーザーにとって問題となる可能性があります。

CSSの相対サイズ

Webサイト上の特定の要素のサイズを変更する場合は、自分のサイトのCSSファイルを変更するだけで済みます。 スマートフォンを読みやすくするために、CSSのサイズとフォントサイズを絶対単位ではなく相対単位に変更してください。 たとえば、特定の要素の幅と高さは、ピクセルではなくパーセンテージで指定する必要があります。 これは、ブラウザウィンドウまたは親要素の割合に基づいて要素のサイズを変更します。 フォントサイズについては、ピクセルの代わりにemsを使用してください。 1 emは現在のフォントサイズ（ピクセル単位）と同じです。 したがって、2 emsは現在のフォントサイズの2倍になります。 これらの変更は別のCSSファイルに保存する必要があります。

CSS表示プロパティ

サイトから要素を完全に隠すには、その要素のCSSスタイルに "display：none"プロパティを追加します。 "display：none"プロパティは要素を完全に隠し、ウィンドウ内のスペースをとらないようにします。 ドロップダウンメニューや画面のスペースを取りすぎる画像などの要素にこれを使用します。 これはあなたのウェブサイトの他の要素が隠された要素があったことがないようにウィンドウに配置することを可能にします。 この修正を使用する場合は、隠し要素からの重要な情報がページのどこかに表示されていることを確認してください。

ブラウザのリダイレクト

デバイスがWebサイトにアクセスすると、まずHTMLドキュメントのセクションが読み込まれます。 ドキュメントのセクション内の複数のCSSスタイルシートにリンクすることができます。 モバイルデバイスがWebサイトを読み込むと、ブラウザはデフォルトのスタイルシートの代わりに、media = "handheld"属性で識別されるスタイルシートを読み込みます。 画面サイズに基づいてブラウザを異なるスタイルシートにリダイレクトすることもできます。 あなたがあなたのウェブサイトを異なったモバイル機器のために異なった様式にしたいならば、これは役に立ちます。 一般的なスマートフォンの画面サイズの一覧については、参考文献を参照してください。

代替HTML

あなたがあなたのサイトの構成とレイアウトを新しいCSSファイルを超えて劇的に変えているならば、あなたは望ましい変更で新しいHTMLファイルを作成したいかもしれません。 別のHTMLファイルを作成する場合、ユーザーがスマートフォンでそのサイトを閲覧している場合は、ブラウザを新しいHTMLファイルにリダイレクトする必要があります。 モバイルブラウザを検出するだけでなく、スクリプトを変更して代替HTMLページにリダイレクトする必要があります。 モバイルブラウザを検出するためのスクリプトへのリンクについては、参考文献を見てください。