Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

sample新着テンプレートが軒並みレスポンシブ化している昨今でございます (´・ω・`)
私としては固定幅もまだまだ需要あると思っております
ただやはりレスポンシブはスマホ読者さんには優しいのではないか と思います
スマホ版にはスマホ版の使い勝手がありますよね
パソコンと同じ方が親切なのではないかしら(笑)

とはいえここは日本でございます
日本が誇る文化「ガラケー」
開発終了しますのでもう後はスマホ勢力が伸びていく一方ですが
まだスマホに二の足を踏んでいる方もいらっしゃるのではないでしょうか
それでもスマホ読者を意識してレスポンシブにしておきたい
という方も
じゃあガラケーしか持ってない方がどうやって自分のページの確認をすれば良いのか
というお話し


「レスポンシブって書いてあったからちゃんとなってるんだ!」
と思ったら大間違いでございま (´・ω・`)
ページ内にはテンプレート作者の意図しないものが含まれます
ユーザー各個人が利用しているプラグイン
そしてカスタマイズ
デザインが崩れていても実機が無いから確認できない というパターン
パソコンからスマホの表示確認する手段をふたつご紹介しますね


① Am I Responsive? を利用


あむ あい れすぽんしぶ? (私ってレスポンシブ?)
という名のサイトです
読んで字のごとく ページがレスポンシブデザインになっているか否かを目視確認できます

Am I Responsive?

対象ページのURLを入れて「GO」を押すだけ
例として私の固定幅テンプレ Botanical でやってみます

sample

一番大きなディスプレイはデスクトップの 1600x992
次に大きいのがラップトップの 1280x802
左端はタブレットですね 768x1024 (iPadがこのサイズです)
一番小さいのがスマホ 320x480 (iPhone5系がこのサイズです)

サンプルに利用したテンプレはレスポンシブではありませんので
タブレットとスマホでは右側が完全に見切れているのがわかります
こちらで実際に確認できます ↓

動作確認する

ちょっと読み込みに時間かかるかもしれませんが我慢(笑)
各デバイス スクロールができます
ここで一番確認すべきは
横スクロールバーが出ているかどうかです
横スクロールするようですと レスポンシブデザインとしては失敗と言っても良いかもしれない
サンプルは当然横にスクロールしますよ
ソリッドデザイン(固定幅) ですから(笑)

このサイトだけで大体の見た目の確認はできるわけですが
これだとタブレットとスマホの表示が小さいですよね (´・ω・`)
目標はこの2デバイスでの表示確認ですから もう一歩踏み込んだ方法
ふたつ前の記事で iOS9向けに shrink to fit=noの記述で
コンテンツが縮小されるのを防ぐ という内容を記しましたが
これがちょっと絡んできます
そのためにこの記事書いてる 実は ←


② Google Chrome の「検証」を利用


各ブラウザ この「検証」あるいは「要素検証」は必ずついてますが
Chromeが一番わかりやすいのではないかと思いますので例に取ります

手順
● 確認したいページの上でマウス右クリック > 検証

デフォルトではこんな感じ ↓

sample


もともと開いていたページの右側に入り込んできます
このままだと検証しにくいので切り離すと良いですね

sample


赤丸の部分を長押しすると表示形態の選択肢が出てきますので
切り離したい方(別ウィンドウにしたい方)はここで操作

んで 左からふたつめにスマホのマークがありますよね
これをクリック ( ゚Д゚)

sample


★ スクロールして全体を確認できます
★ ボタン類は全てスマホと同じ動作で確認できます(偽装上で有効です)
★ 一部スマホで実際は見られないコンテンツが見れてしまいます(フラッシュ等)
★ UAを切り分けて表示されるものも確認できます
(例: スマホだけドロワーメニュー など)

ブラウザ幅の縮小だけでは完全ではないんですよね (´・ω・`)
縮小するにも限りがあります
Firefoxなんかは横幅をかなり縮小できますが
Chromeはタブがたくさん開いてるとあんまり小さくならない(笑)
そしてこういった偽装ツールを利用すると デバイスの画面幅ズバリで示してくれますのでとっても便利

確認すべき点

● 横スクロールバーが出ていないかどうか
コンテンツが見切れていないか

コンテンツの見切れなんですけどもー
横へのはみ出しを防ぐために htmlやbody あるいは全体コンテナに
overflow: hidden;
というのが設定されていることがあります
(私のテンプレにはありません)
これがあるとですね はみ出したものは強制的にカットされた状態 = 見切れ が起こります
スクロールバーも当然出ませんので(そのための処理です) どうやっても見ることができなくなってしまいます
(横に倒せばサイズによっては見れることもあるけどね)
例えばスマホ画面幅を超過している アフィリエイト ですとか
同じく超過している プラグイン, ランキングバナーなどなど
こちらもしっかり確認した方が良いですね(結構見かけます)

--------

先日の shrink-to-fit=no の件です

こちらの記述が必要なものは私の方で書くから良いのですが
その場合には偽装ツールが使えなくなります

サンプル ↓

sample


上で書きましたよね
「グレーの部分がはみ出てたら実機でもはみ出とるぜ (´・ω・`)」って
でも実際には実機でははみ出しません
確認しづれぇ
この場合には shrink-to-fit=no をつけたり外したりして確認するしか
Appleさん修正して!お願い!


以上 偽装ツールを上手く使おうね という記事でした (((ง'ω')و三 ง'ω')ڡ≡シュッシュ
関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い