站长必学!使用模拟器测试网站在显示效果教学

核心提示两周前Apple在iPhone诞生十周年之际宣布推出「iPhone X」,吸引全球目光,堪称有史以来最高阶iPhone手机,更将沿用十年的Home键拿掉,让使用者享受全屏幕OLED显示器,宣示意味重大。虽然价格已来到一个非常神奇的区间,身边

两周前,苹果公司在iPhone诞生十周年之际宣布推出“iPhone X”,吸引了全世界的目光。这是有史以来最高级别的iPhone,甚至取消了使用了十年的Home键,以便用户可以享受全屏有机发光二极管显示。这一声明意义重大。虽然价格来到了一个非常神奇的区间,但是身边很多朋友都表示肯定要买iPhone X,或许它的各种功能设计都是走在时代前列的,让人无法抗拒!

可以想象iPhone X会卖得很好,但同时推出的iPhone 8和iPhone 8 Plus同样令人印象深刻。对于网站开发者来说,有可能在iPhone X上市前就开始测试。比如大多数人会关心的网站和博客,在全新的屏幕尺寸下能否正确浏览,可能是一个非常重要的问题,值得进一步探讨。

但是如果你和我一样,不打算买iPhone X,怎么在手机上测试网站是否正常工作呢?

开发者工具套件Xcode内置的“模拟器”在9.0更新后增加了对iPhone X、iPhone 8和iPhone 8 Plus的支持,这也意味着你可以在Mac上使用模拟器来测试网站和博客在新iPhone上是否可以正常显示,非常好用。

如果你恰好使用macOS,请按照以下说明下载并更新Xcode!除了测试最新的iPhone X,还有一系列的iPhone、iPad、Apple TV、Apple Watch环境可以模拟,是非常实用的开发工具。至少你不需要实际拥有这些硬件设备。这是适当的看看网站和调整移动页面或RWD。

网站名称:Xcode-苹果开发者

网站:https://developer.apple.com/xcode/

相关资源:http://mx108.com

使用教学

第一步

可以直接打开Xcode网站,点击右上角的“下载”登录开发者账号,通过下载页面即可获得连接,也可以通过搜索Mac的App Store找到。

第二步

第一次使用时,安装需要一些时间。

第三步

打开Xcode开发工具后,从顶部菜单点击Xcode,找到Open Developer工具,选择Simulator选项。

目前我测试默认开启的模拟器会是最新的iPhone X,如果你的不是,或者想切换到其他设备,可以点击顶部菜单“硬件”,找到“设备”选择其他设备。Xcode目前支持iOS、tvOS和watchOS,包括智能手机、平板电脑、电视和手表。

第四步

等待iPhone开机,启动后会看到如下画面。用鼠标直接操作!

回到前面的问题,如何测试网站在iPhone X上显示是否正常?点击iPhone的Safari浏览器,输入要测试的网站网址。加载后,网页会显示在iPhone X上!虽然屏幕大了一点,但是如果你的网站使用自适应网页设计,看起来应该不会有错误。你也可以测试其他尺寸的iPhone。

第五步

直立模式测试后,从菜单上的“硬件”中选择“向右旋转”,将设备向右旋转90度。

通过这种方式,您可以测试iPhone横向显示网页的效果。

毕竟横向宽度更大,浏览效果可能完全不一样。但由于移动设备的浏览区域有限,还是要设想一些用户可能习惯了横排阅读,花点时间检查调整一下,避免出现浏览问题。

67操作建议的三个理由:

1.根据iPhone X的屏幕尺寸和显示范围测试网站版本。

2.使用苹果提供的开发工具Xcode,搭建很多设备模拟器。

3.iPhone,iPad,Apple TV,Apple Watch都可以测试

 
友情链接
鄂ICP备19019357号-22