Safari4開発者ツールを使用してWindowsでモバイルWebサイトを表示する

Aug 19, 2025
クラウドとインターネット

iPhoneやその他のモバイルデバイス用に設計されたモバイルWebサイトをPCで試してみませんか? Safari 4 for Windowsを使用すると、開発者ツールを使用してこれを簡単に行うことができます。

デフォルトでは、Safariは標準のデスクトップWebサイトを表示します。ただし、簡単な変更を加えるだけで、iPhoneまたはiPodTouchのSafariMobileのように機能するように切り替えることができます。

入門

まず、Safari 4 forWindowsがインストールされていることを確認してください。 Safariを直接ダウンロードできます( 以下のリンク )そして通常通りインストールします。

または、QuickTimeやiTunesなどの別のAppleプログラムがすでにインストールされている場合は、Apple SoftwareUpdateからインストールできます。入力するだけです アップルソフトウェアアップデート [スタート]メニューの検索ボックスで。

次に、利用可能な新しいソフトウェアのリストからSafari4を選択します。 [インストール]をクリックして、Safariを自動的にダウンロードしてインストールします。

使用許諾契約に同意すると、Safariが自動的にインストールされます。

これが完了すると、Safariを使用できるようになります。

Safariでモバイルサイトを表示する

まず、開発者ツールを有効にする必要があります。ツールバーの歯車アイコンをクリックして、[設定]を選択します。

[詳細設定]タブをクリックし、[メニューバーに[開発]メニューを表示する]チェックボックスをオンにします。

設定ボックスを閉じたら、ページアイコンをクリックし、[開発]、[ユーザーエージェント]の順に選択して、MobileSafari設定の1つを選択します。テストでは、Mobile Safari 3.1.2 –iPhoneを選択しました。

ブラウザがモバイルデバイスをより適切にエミュレートするために、ブックマークとタブバーを非表示にして、インターフェイスをより合理化することができます。

歯車アイコンをクリックし、「ブックマークバーを非表示」を選択してから、繰り返して「タブバーを非表示」をクリックします。

ウィンドウを縮小して、モバイルデバイスの画面のサイズに近づけることもできます。これらの作業を完了すると、Safariはこのスクリーンショットのようになります。ここにGoogle.comがロードされており、iPhoneスタイルのインターフェースで見ることができます。

アドレスバーに任意のWebサイトを入力するだけで、モバイルインターフェイスがあればそれが読み込まれます。これが、Windows内にあるGoogleの他のモバイル製品です。

Gmailは、デフォルトのiPhoneインターフェースでメッセージを読み込みます。

特に興味深いモバイルサイトの1つは、Appleのオンラインです。 iPhoneユーザーガイド 。 iPhone設定でSafariにロードすると、iPhoneアプリと同じように機能する非常に優れたモバイルUIがロードされます。実際、iPhoneで指を使っているのと同じように、クリックしてドラッグしてスクロールすることもできます。

結論

スマートフォンをお持ちでない場合でも、このトリックを使用してWebサイトがどのように表示されるかをプレビューできます。もちろん、すべてのサイトが機能するわけではありませんが、モバイルバージョンのあるさまざまなサイトを試してみるのは楽しいことです。

リンク:

Safari4ダウンロード

AppleiPhoneオンラインユーザーガイド

How To Open Developer Tools In Safari

How To Enable Safari Developer Tools

How To Use Safari Developer Tools For Testing Mobile And Responsive Web Sites

Mobile Debugging Using Google Chrome Developer Tools

Using Desktop Safari Browser To View Mobile Version Of A Site

How To Enable Developer Mode In Safari Browser

How To View Your Website On Multiple Mobile Phones

Firefox 11 Developer Tools Update

Using Responsive Mobile View In Google Chrome

Debug A Website In IOS Safari From A Windows 10 PC

Using Web Inspector On Mac To Debug Mobile Safari

Safari Development Tools - Responsive Design Mode

Web Browser Dev Tools Part 1: Mobile Website Testing


クラウドとインターネット - 最も人気のある記事

ソーシャルネットワークは素晴らしいですが、ニュースを入手するにはひどい場所です

クラウドとインターネット May 27, 2025

未取得のコンテンツ ソーシャルネットワークは楽しく、さらには便利です。しかし、それらは世界についての情報を常に入手するた�..


一部のシステムユーザーがシェルとして/ usr / bin / falseを使用しているのはなぜですか?

クラウドとインターネット Mar 7, 2025

未取得のコンテンツ Linuxシステムを掘り下げ始めると、たとえば/ usr / bin / falseのように、紛らわしい、または予期しないものが見つ�..


同じWi-Fiネットワーク上の2台のコンピューターのIPアドレスは同じですか?

クラウドとインターネット Jan 9, 2025

未取得のコンテンツ ネットワークとIPアドレスのしくみについて学び始めたばかりのときは、すべてが少し圧倒されるように思える�..


MicrosoftはWindowsLive Messengerをシャットダウンしています:これはあなたにとって何を意味しますか

クラウドとインターネット Jan 23, 2025

未取得のコンテンツ Windows Live Messenger(以前のMSN Messenger)は、2013年3月15日にシャットダウンする予定です。MicrosoftはこれをSkypeに置�..


Windows8リリースプレビューでMetroブラウザとしてChromeを使用する方法

クラウドとインターネット Jul 23, 2025

Windows 8では、Metro環境でサードパーティのブラウザをInternetExplorerに置き換えることができます。 Windows RT 。現在MetroでGoogleCh..


クイックアクセスのためにモバイルWebアプリをシステムトレイに固定する方法

クラウドとインターネット Oct 17, 2025

デスクトップに最適化された大きな不格好なインターフェイスがなくても、Webサイトにすばやくアクセスできるようにしたい場�..


Outlook with GmailIMAPがToDoバーに重複するタスクを表示しないようにする

クラウドとインターネット May 29, 2025

IMAPを介してGmailでOutlookを使用している場合は、非常に厄介な問題に気付いたかもしれません。Outlookでメールにフラグを付けたり、Gmailでスタ�..


ハウツーオタク報奨金:Vista用アクティブデスクトップで103.24ドル(有料!)

クラウドとインターネット Sep 18, 2025

未取得のコンテンツ 更新: この賞金 主張されている 。 Windows Vistaでの明白な変更の1つは、アクティブデスクト�..


カテゴリ