自分のWebサイトがデバイスからどう見えるか確認しよう Responsive View

IPhone

今日の人気記事

  1. SMART ICOCAを発行して使ってみたので良い点悪い点をまとめてみた
  2. SMART ICOCAの退会(払いもどし)をしてみたので注意すべきことをまとめておく
  3. 栃木県益子町にある大川戸ドライブインで流しそうめんを楽しんでみた
  4. GALAXY Note II(SC-02E)をAndroid Lollipop(5.0/CM12.0)にしてみたのでメモを残しておく
  5. 円錐形ドリッパーを買ってみたので台形(扇形)ドリッパーとの違いをまとめてみた
  6. Firefox Quantum(Firefox 57)にしたらFireFTPが使えなくなったのでFTPクライアントを探してみた
  7. GALAXY Note II(SC-02E)をAndroid 6.0.1 Marshmallow(CM13)にしてみたのでメモを残しておく
  8. BIC SIMカウンターでSIMカードをmicro SIMからnano SIMへサイズ変更してみたので残しておく
  9. ウィルキンソン タンサン グレープフルーツを飲んでみた
  10. マウスからトラックボール(親指型/人差し指型)に変えて感じたメリットとデメリット
この記事の読了時間: 142

ごきげんよう

モバイルファーストやモバイルオンリーという言葉が出てきて、PCやWeb版とはどこへ行ったのかと気になる今日このごろです。
実際にこのブログを訪れる方の半数以上はスマートフォンやタブレットを使用しているようです。

このブログはレスポンシブデザインになっていて、デバイスの画面サイズによって表示内容が変わるようにしているので、小さい画面でも文字が多くてごちゃごちゃしないよう気をつけています。

このレスポンシブデザインとは、デザイン手法のひとつで様々な機器(スマートフォン、タブレットやPCなど)の画面サイズに対して単一のファイルで対応するものです。
スマートフォン用、パソコン用といった別々のファイルは存在せず、全て共通しています。

しかし、このレスポンシブデザイン。作ったはいいけど正常に表示されるか確認するには画面サイズ違いのデバイスを用意するか、ブラウザで偽装する必要があります。
意外と面倒ですね。簡単に確認できるものはないでしょうか。

IPhone

そんな中、自分のWebサイトやブログがレスポンシブデザインで正しく表示されているか確認するサイトがあります。
その名は「Responsive View」

Responsive View

アクセスしたら、中央にある欄に確認したいWebサイトURLを入力してLet’s GO!しましょう。

iPhone、iPad、MacBookなどで縦横の表示状態が見られます。
複数端末の表示を同時に見られますし、表示をクリックしてトップページや個別記事の表示の状態も確認出来ます。

一覧ページになっているという点で使いやすいかなと思います。
Webサイトやブログをやっている方はデバイスごとにどのような表示になっているか確認されてみてはいかがでしょうか。
私も実際にやってみて気になる部分を見つけてしまいました。

それでは ごきげんよう

source:
Responsive View

RSS/feedlyはこちら

follow us in feedly


プッシュ通知受信はこちら



Twitterアカウントはこちら




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>