Results for tag "レスポンシブ"

2 Articles
User-Agent-Switcher1

[Ď] Firefoxのプラグイン「User Agent Switcher」を使って、ユーザーエージェントを変更する方法

お疲れ様です。@Micchy_R

ユーザーエージェント(以降UA)によって判定しているプログラムが実装されている場合、実機での検証はなかなか出来ないものです。
特にレスポンシブWebデザインなどを採用していると、UAによって表示/非表示にしたり、CSSを変更したりなど、様々な検証が必要になってきます。

そもそもUAとは?

ユーザーエージェントとは、Webサイトへのアクセスの際に使用されるプログラムのことである。

HTMLを解釈して画像化し、Webサイトとしてディスプレイに映し出すためのレンダリングを行い、ディスプレイに画像・文字などを表示するためのWebブラウザや、検索用データベースを作成するためにWebサイトを巡回するクローラ、利用しているOSなども、ユーザーエージェントに含まれる。携帯電話向けサイトを閲覧する場合にも、この用語が使われる。

HTTPではリクエスト中に、クライアント側から使用しているWebブラウザ、バージョンなどの情報を申告する。アクセス解析ツールにおいて、Webサイトにアクセスしたユーザーのブラウザが分かってしまうのはこのためである。ただ、あくまでクライアント側からの自己申告の情報であるため、文字列を書き換えることにより、これを偽装することも可能である。

Weblio辞書より引用

ここでも書いてあるとおり、UAを偽装してPCのみで検証するアドオンがあるので、今回紹介したいと思います。

Read More

Am-I-Responsive1

[Ď] 4種類のデバイスでレスポンシブウェブデザインの表示結果を見れる「Am I Responsive?」

お疲れ様です。@Micchy_R

レスポンシブウェブデザインで構築されたサイトを、4種類のデバイスで「表示した時の見栄え」を同時に見れるサービスです。
それぞれのサイズは次のようになっていて、全てAppleの製品の枠の中に収まります。

  • Desktop:1600x992px
  • Laptop:1280x802px
  • Tablet:768x1024px
  • Mobile:320x480px

ココの枠内で見れたから、どういう使い道があるのかと言われると正直分かりません。。
キャプチャを実績に載せるとかしか思い浮かばないのですが、だったら、ちゃんと作りこんだ方がいい気がします。
なので、紹介するにはちょっと微妙かもしれませんが、新たな使い方を教えていただけるとありがたいです。

Read More

Top