web-dev-qa-db-ja.com

ウェブサイトをモバイルとタブレットに対応させるにはどうすればよいですか?

既存のWebサイトを、携帯電話、タブレット、またはデスクトップの画面を調整したときに自動的に調整したい。

それができない場合、難しすぎるとしたら、どのような提案をしますか?私は基本的に、同じURLを使用するipadとiphone(Android)のバージョンと、モバイルブラウザーが検出されたときに自動ダイレクトが必要です。

どうもありがとう

8

あなたはレスポンシブウェブデザインを探しています! MediaQueriesから開始 http://mediaqueri.es/

また、理解を深めるためにこれをチェックしてください

http://www.slideshare.net/zomigi/building-sensitive-layouts-15508821

12
Anbu

他のユーザーの回答に加えて、モバイルサイトには2つの基本的なオプションがあります。

個別のデスクトップサイトとモバイルサイト、またはすべてのデバイスで動作する単一のレスポンシブサイトを作成できます。

最初のオプションとして、モバイルのみのバージョンのサイトをホストしている完全に異なるURLにモバイルユーザーをリダイレクトできます。これを行うには、リダイレクトを http://detectmobilebrowsers.mobi/ のように管理するか、.htaccessファイルを使用したリダイレクトにはさまざまなバリエーションがあります。

Jquery Mobile は、その後モバイル専用サイトを開発するための本当に良い方法の1つです。

このアプローチには、軽量のモバイル専用バージョンのサイトを簡単に開発できるという利点があります。 1つの欠点は、デスクトップとモバイルの2つのWebサイトを維持する必要があることです。

他のオプションは、他の人が提案したレスポンシブなアプローチです。ここには基本的に、訪問者のブラウザのWidowサイズに応じて再構成する1つのサイトがあります。 BootstrapFoundation は2つの優れたオプションですが、他にもたくさんあります。

レスポンシブサイトは、メディアクエリに基づいてウィンドウサイズを調べます。これは最新のブラウザーで十分にサポートされていますが、回避する必要がある可能性のある古いブラウザーでは問題が発生します。レスポンシブサイトの利点の1つは、1つのサイトのみを維持することです。理論的にはすべての画面とウィンドウサイズで機能するため、画面サイズが異なる次のモバイルデバイスがリリースされても問題は発生しません。

幸運を祈ります。Webデザインを行うのは興味深い時期です。

8
David Taiaroa

レスポンシブデザイン を調べる必要があります。あなたが始めることができる多くの無料のオープンソースフレームワークがそこにあります、おそらく最も人気のあるものは bootstrapfoundation です。

2
juco