safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

safari 的开发工具

Want to try out mobile websites designed for the iPhone and other mobile devices on your PC?  Safari 4 for Windows lets you do this easily with their developer tools.

是否想尝试为iPhone和PC上的其他移动设备设计的移动网站? Windows的Safari 4使您可以使用其开发人员工具轻松完成此操作。

By default, Safari will show standard desktop websites.  But by making a simple change, you can switch it to work like Safari Mobile on the iPhone or iPod Touch.

默认情况下,Safari将显示标准的桌面网站。 但是通过简单的更改,您可以将其切换为像iPhone或iPod Touch上的Safari Mobile一样工作。

Getting Started

入门

First make sure you have Safari 4 for Windows installed.  You can download Safari directly (link below) and install it as usual.

首先,请确保您已安装Windows的Safari 4。 您可以直接下载Safari( 下面的链接 )并照常安装。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Or if you already have another Apple program installed, such as QuickTime or iTunes, then you can install it from Apple Software update.  Simply enter apple software update in the Start menu search box.

或者,如果您已经安装了另一个Apple程序,例如QuickTime或iTunes,则可以从Apple软件更新中安装它。 只需在“开始”菜单搜索框中输入Apple软件更新

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

And then select Safari 4 from the list of new software available.  Click Install to automatically download and install Safari.

然后从可用的新软件列表中选择Safari 4。 单击安装以自动下载并安装Safari。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Accept the license Agreement, and then Safari will automatically install.

接受许可协议,然后Safari将自动安装。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Once this is finished, Safari will be ready to use.

完成此操作后,便可以使用Safari了。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

View Mobile Sites in Safari

在Safari中查看移动网站

First, we need to enable the developer tools.  Click the gear icon on the toolbar, and select Preferences.

首先,我们需要启用开发人员工具。 单击工具栏上的齿轮图标,然后选择首选项。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Click the Advanced tab, and then check the box that says “Show Develop menu in menu bar”.

单击“高级”选项卡,然后选中“在菜单栏中显示开发菜单”框。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Once you’ve closed your settings box, click the page icon, select Develop, then User Agent, and then choose one of the Mobile Safari settings.  In our test we chose Mobile Safari 3.1.2 – iPhone.

关闭设置框后,单击页面图标,选择“开发”,然后选择“用户代理”,然后选择其中一种Mobile Safari设置。 在我们的测试中,我们选择了Mobile Safari 3.1.2 – iPhone。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

To make your browser emulate a mobile device better, you can hide the bookmarks and tab bar to have a more streamlined interface.

为了使您的浏览器更好地模拟移动设备,您可以隐藏书签和标签栏以具有更简化的界面。

Click the Gear icon, and select “Hide Bookmarks Bar”, and then repeat and click “Hide Tab Bar”.

单击齿轮图标,然后选择“隐藏书签栏”,然后重复并单击“隐藏标签栏”。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

You can also shrink your window to be closer to the size of a mobile device screen.  Once you’ve done these things, Safari should look similar to this screenshot.  Here we have loaded Google.com, and you can see it in its iPhone-style interface.

您还可以缩小窗口以使其更接近移动设备屏幕的大小。 完成这些操作后,Safari应该看起来类似于此屏幕截图。 在这里,我们已经加载了Google.com,您可以在其iPhone风格的界面中看到它。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Simply enter any website into the address bar, and it will load in its mobile interface if it has one.  Here is Google’s other mobile offerings, right inside Windows.

只需在地址栏中输入任何网站,网站就会在其移动界面中加载。 这是Windows内部的Google的其他移动产品。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Gmail loads messages with the default iPhone interface.

Gmail使用默认的iPhone界面加载邮件。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

One especially interesting mobile site is Apple’s online iPhone User Guide.  When loaded in Safari with the iPhone setting, it loads with a very nice mobile UI that works just like an iPhone app.  In fact, you can even click and drag to scroll, just like you would with your finger on an iPhone.

一个特别有趣的移动网站是Apple的在线iPhone用户指南 。 当使用iPhone设置在Safari中加载时,它会加载一个非常漂亮的移动用户界面,其功能类似于iPhone应用程序。 实际上,您甚至可以单击并拖动以滚动,就像用手指在iPhone上一样。

safari 的开发工具_使用Safari 4开发人员工具在Windows中查看移动网站

Conclusion

结论

Even if you do not have a Smartphone, you can still preview what websites will look like on them with this trick. Not all sites will work of course, but it’s fun to play around with different sites that have mobile versions.

即使您没有智能手机,也可以使用此技巧预览在其上的网站外观。 当然,并非所有网站都能正常工作,但是与具有移动版本的其他网站一起玩很有趣。

Links:

链接:

Safari 4 Download

Safari 4下载

Apple iPhone online user guide

Apple iPhone在线用户指南

翻译自: https://www.howtogeek.com/howto/12663/view-mobile-websites-in-windows-with-safari-4-developer-tools/

safari 的开发工具