ホームページ  >  記事  >  ウェブフロントエンド  >  パソコンアクセス、携帯電話アクセスに対応したホームページを制作します。 _html/css_WEB-ITnose

パソコンアクセス、携帯電話アクセスに対応したホームページを制作します。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:16:381351ブラウズ

同社はポータルサイトを開発していますが、PCでアクセスする場合は問題ありませんが、携帯電話に付属のブラウジングボールでアクセスすると、レイアウトに問題があり、レイアウトが非常に悪いです。
私の考えは、ユーザーが携帯電話から Web サイトにアクセスしているのか、PC からアクセスしているのかを判断できるかどうかです。その場合、PC はリッチ レイアウトのポータル Web サイトにアクセスし、携帯電話からは 2 つの処理を行うことができます。合理化されたバージョンの Web サイトにアクセスします。
そうでない場合は、専門家が解決策を教えてくれることを願っています。


ディスカッションへの返信 (解決策)

PC と携帯電話でアクセスするページが 2 セットある必要があります。PC のページには多くのコンテンツが含まれていますが、携帯電話のページは一般に簡素化する必要があります。どのように呼び出して判断するかはプログラマーの問題です。わかりませんが、笑

現在のスマートフォンのブラウザは、基本的に実際の PC ブラウザとそれほど変わりません (速度を除いて)。ページが W3C 標準を満たしている限り、同じように表示されるはずです。

ブラウザを区別する必要がある場合は、各ブラウザに固有の userAgent を確認できます。 userAgent は、クライアント上で

window.navigator.userAgent

を使用して取得できます。サーバー側では、使用するテクノロジによって異なりますが、通常はドキュメントに記載されています。



現在のスマートフォンのブラウザは、基本的には実際の PC ブラウザとそれほど変わりません (速度を除く)。ページが W3C 標準を満たしている限り、同じように表示されるはずです。
ブラウザを区別する必要がある場合は、各ブラウザに固有の userAgent を確認できます。 userAgent は、クライアント上で
window.navigator.userAgent

を使用して取得できます。サーバー側では、使用するテクノロジによって異なりますが、通常はドキュメントに記載されています。


今どのブラウザでアクセスしているのかを区別したくないのですが、携帯電話からアクセスしているのか、パソコンからアクセスしているのかを区別したいのです。 UserAgent は、どのブラウザが使用されているかを区別することしかできません。

これは非常に簡単です。異なるレイアウトで 2 つの CSS スタイル シートを作成し、次のようにするだけです。



この原則は、お客様が判断するものではなく、コンピューターまたは携帯電話のブラウザー自体の機能を使用することです。要件に最も適した CSS を自分でチェックするため、携帯電話に適した CSS を指定しないと、コンピューター用のソリューションしか使用できず、理想的な効果が得られません。

このようなことを自分で行う必要はありません。活用する方法を学びましょう。もちろんスマートフォン以外でもWMLなどを使用している場合はWebサイトを変換する必要があります。しかし、あなたはそれらを除外しているようですが、それは正しいことであり、不必要です。

js を使用して判断できます。例: !/((iPhone|iPad|iPod)/i.test(navigator.userAgent) これは Apple ハンドヘルドデバイスかどうかのみを判断します。他のデバイスも判断できます

注意してください

これは非常に簡単です。異なるレイアウトで 2 つの CSS スタイル シートを作成し、次のようにするだけです。

...
また、2 つのセットを作成する予定です
たとえば、私のプロジェクトは www.myWebSite にデプロイされます。プロジェクトディレクトリの下には、index.html、computer.html、telphone.html という 3 つの html ファイルがあります。このとき、ユーザーは携帯電話からアクセスするかどうかが決まります。ユーザーが携帯電話から入力する場合は、telphone .html を入力し、コンピューターを入力する場合は、computer.html を入力します。
サーブレット

サーブレット
を入力します。

7階のtheforeverさんからの返信を引用します:
これはとても簡単で、レイアウトの異なるCSSスタイルシートを2セット作成し、次のようにするだけです:

私も2セット作る予定です。
現在の問題は、自動ジャンプを実現することです。
私が言及した 2 つのセットは、あなたが考えている 2 つのセットではありません。
必要な 2 つのセットは、HTML から CSS、さらには画像全体までです。
2 つのセット、CSS だけを意味します。ページはまだ 1 ページなので、ジャンプする必要はまったくありません。デバイスに応じて、当然異なる CSS ソリューションが呼び出されます。ページ レイアウトを整えて CSS を適切に記述すれば、1 つのページでデバイスに応じた 2 つのまったく異なる表示効果が得られます。

プログラムがデバイスを検出してジャンプする方法は、バックグラウンドでもフォアグラウンドでも実装可能です。
しかしその場合、2 つのセットを作成するには時間と労力がかかり、一方の部分が変更されると、もう一方も同時に変更する必要があります。
私の方法は、現在および将来的に最低のコストでそれを達成できるように検討することです。

プログラムがデバイスを検出してジャンプする方法は、バックグラウンドでもフォアグラウンドでも実装可能です。
しかしその場合、2 つのセットを作成するには時間と労力がかかり、一方の部分が変更されると、もう一方も同時に変更する必要があります。
私の方法は、現在および将来的に最低のコストでそれを達成できるように検討することです。
現在の要件では、2 つのアクセスの内容がまったく異なるため、2 つのセットを作成する必要があります。携帯電話からアクセスできるモジュールは「FAQ」と「ソフトウェアダウンロード」の 2 つだけですが、他にもたくさんあります。コンピュータからアクセスできるコンテンツ。最終的には議論の結果、ページ、CSS、画像を含めて2セット作ることに決定しました。
デバイスのジャンプを検出するのは簡単だと上で言いましたが、その方法を教えてください。

モバイルブラウザとPCブラウザがJSを使って差別化された情報を取得できない限り無理です。

そして、ユーザーがインターネットにアクセスするために携帯電話を使用するかコンピューターを使用するかは、厳密に言えば個人のプライバシーです。

注意してください...業界がそれをどのように実装しているかわかりません。たとえば、wap.sina.com

モバイル Web サイトの作り方、専門家が教えてくれます

投稿者が持っているかどうかはわかりませんこの問題は解決しました。私も同じ問題に遭遇しました。PC とモバイルの Web サイトを区別する必要があるだけです。どうすればよいかわかりません。問題が解決した場合は、ありがとうございます。

js は、ナビゲーター オブジェクトで使用されるブラウザのシステム プラットフォームを決定します

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。