投稿日: | 最終更新日:
PCでスマートフォンサイトをブラウザチェックする
レスポンシブなWebサイトを作る場合、スマートフォンやタブレットでも正しく表示できるかテストします。
テスト環境を作るだけでも大変な作業量です。
しかし、安心してリリースするために必ずチェックしましょう。
ブラウザチェック
実機に近い状態でチェックできるブラウザがあります。
ただし、PCブラウザでのチェックは簡単な表示テストのためであり、まったく同じ表示ではありません。
※当然ながらタッチ操作はできません。
safari for windows
Chrome
safari
①右上の歯車のマークをクリックして、「設定」を選びます。
②「詳細」をクリックして、「メニューバーに”開発”メニューを表示」にチェックします。
③右上のプリントマークをクリックして、「開発」→「ユーザーエージェント」を選択し、ブラウザのバージョンを選択します。
Chrome
①「その他ツール」→「デベロッパーツール」を開きます。
②スマートフォンのマークをクリックします。
③Consoleウィンドウ(下のウィンドウ)にある「Emulation」タブをクリックします。
すると、「Model:」ドロップダウンがりますのでスマートフォンのバージョンを選択します。
これらはiphoneやAndroidに搭載されているブラウザで、PC版と同じWebkitエンジンを利用しています。
トラックバック用のURL
プロフィール
最近の投稿
人気記事
カテゴリー
- Python 67
- 制作 57
- WordPress 39
- RaspberryPi 36
- Django 24
- VPS 22
- PHP 20
- Linux 19
- JavaScript 18
- HTML・CSS 16
- レスポンシブデザイン 13
- WEB全般 11
- 仮想環境 10
- 起業・設立 7
- jQuery 7
- Webサービス 7
- SEO 6
- 携帯サイト 5
- heroku 5
- symfony 4
- node.js 4
- マイコン 4
- ツール 3
- facebook 3
- Go言語 3
- PC 3
- Docker 3
- 作業効率化 3
- Webスクレイピング 3
- Webサーバー 2
- ネットワーク 2
- Java 2
- ドローン 2
- コンテナ 2
- Kali Linux 2
- 知識 1
- データベース 1
- アフィリエイトノウハウ 1
- スマートフォン 1
- アクセス解析 1
- 役立つ本・書籍 1
- git 1
- アニメ 1
- movie 1
- Rhino 1
- D3.js 1
- アニメーション 1
- TypeScript 1
- データサイエンス 1
- Nginx 1
- ownCloud 1
- コマンド 1
- ESP32 1
広告