PC画面で、モバイル表示確認

デザインモバイルデザイン

Q.Chromeでモバイル表示する際、実機以外で一番再現性が高いと思われるオンラインツールはどれですか?

 状態:-  閲覧数:2,627  投稿日:2016-09-20  更新日:2017-10-28
レスポンシブWebデザイン
これまでずっと下記で確認していたのですが、どうやっても表示がうまくいかず、
試しに別のURLで確認してみたら、正常表示されていました

Chrome
・デベロッパーツールより『Toggle device toolbar』をクリック
・device toolbarより『デバイス』を選択

Chromeでモバイル表示する際、実機以外で一番再現性が高いと思われるオンラインツールはどれでしょうか?
・デベロッパーツール / Toggle device toolbar
モバイル フレンドリー テスト
・Resizer
Demonstrating Responsive Design
・上記以外


A


Chromeデベロッパーツール
・実機で不具合が発生した場合は、Chromeデベロッパーツールでその不具合を発生させ、デバッグ実行

Resizer

 閲覧数:685 投稿日:2016-09-20 更新日:2017-05-09

Google公式提供オンラインサービス


Chromeでのモバイル表示確認は、開発ツールではなく「Resizer」を使用
Resizer
・インタラクティブビューア
・デスクトップ、モバイル、タブレット

2017/5/9
・正常動作しない



Sizzy

 閲覧数:641 投稿日:2017-05-09 更新日:2017-10-28

Nexus 6P


特定ページだけレイアウトが異なる現象に2回遭遇

PC
・正常表示

Sizzy
・正常表示

Nexus 6P
・レイアウトが崩れる

注意事項
・完全に再現しているわけではない


GitHub - kitze/sizzy: A tool for developing responsive websites crazy-fast

Blisk

 閲覧数:633 投稿日:2017-06-05 更新日:2017-06-05
Sizzyで再現できなかったレイアウト崩れをPC上で再現出来た


短所


ダウンロードが必要
一部の機能は有料


Blisk


モバイルデザイン10 / aタグ範囲「切り替え」



週間人気ページランキング / 8-4 → 8-10
順位 ページタイトル抜粋 アクセス数
1 Design 0 10
2 鉄道会社毎のカラーコード | カラーコード(色) 7
3 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
4 CSSトラブル対応(CSS) カテゴリー 3
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
5 PNG | 画像 2
5 Sleipnir | ブラウザ 2
5 既存画像を手動補正 2
5 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 | Google Chrome(ブラウザ) 2
5 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 2
5 「OOCSS」とは別の考え方? | 命名規則(コーディングルール) 2
5 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
5 img srcタグで、画像の上に文字 | 色 2
5 ソフトウェア カテゴリー 2
6 イラスト素材 | デザイン 1
6 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる | フォーム(CSS) 1
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 1
6 Web Components(HTML) カテゴリー 1
6 MHTML | Google Chrome(ブラウザ) 1
6 GIMP | GIMP 系(ソフトウェア) 1
2026/8/11 5:05 更新