两周前Apple在iPhone诞生十周年之际宣布推出「iPhone X」(罗马数字中的10),吸引全球目光,堪称有史以来最高阶iPhone手机,更将沿用十年的Home键拿掉,让使用者享受全屏幕OLED显示器,宣示意味重大。虽然价格已来到一个非常神奇的区间(想想一支手机可以卖到三万多甚至超过四万元真是不可思议),身边却有不少朋友表示绝对要买iPhone X,或许是它的各种功能设计都是走在时代前端,令人难以抗拒吧!
可想而知iPhone X一定会卖得非常好,但同时推出的iPhone 8和iPhone 8 Plus也不遑多让,对网站开发者来说,可以趁着iPhone X上市前开始着手进行测试,例如大部分人会关心的网站、博客能不能在全新屏幕大小中正确浏览,这可能是个相当重要且值得深入探讨的问题。
不过你如果和我一样不打算购买iPhone X,要如何测试网站能否在手机上正确运作呢?
Apple开发者工具套件Xcode内置的「模拟器」(Simulator)在9.0更新后加入对iPhone X及iPhone 8、iPhone 8 Plus支持,这也表示你可以在Mac使用模拟器来测试网站、博客是不是能够在新的iPhone正常显示,非常好用。
如果你刚好也使用macOS,赶快照着以下教学来下载、更新Xcode吧!除了可测试最新iPhone X外,也有各系列的iPhone、iPad、Apple TV和Apple Watch环境能够模拟,对于开发来说是个很实用的工具,至少你不需要实际拥有这些硬件设备,拿来看看网站,调整一下行动版页面或RWD都很合适。
站点名称:Xcode–Apple Developer
网站连接:https://developer.apple.com/xcode/
相关资源:http://mx108.com
使用教学
STEP 1
你可以直接打开Xcode网站,点击右上角的「Download」登入开发者帐户,就能通过下载页面取得连接,或者从Mac的App Store搜寻应该也找得到。
STEP 2
第一次使用时需要一些时间安装。
STEP 3
开启Xcode开发工具后,从上方菜单点击「Xcode」,找到「Open Developer Tool」选择其中的模拟器「Simulator」选项。
我目前测试预设开启的模拟器会是最新的iPhone X,假如你的不是,或是想切换成其他装置,可以点击上方菜单「Hardware」,找到「Device」就能选择其他装置,目前Xcode支持iOS、tvOS和watchOS,包括智能手机、平板电脑、电视和手表。
STEP 4
等待iPhone开机一下,启动后就会看到如下画面,直接使用鼠标来操作吧!
回到最前面的问题,要如何测试网站在iPhone X显示是否正常呢?点击iPhone的Safari浏览器,输入要测试的网站网址,加载后就是网页在iPhone X显示的状况啰!虽然屏幕稍微大了点但如果你的网站使用「自适应网页设计」(Responsive web design,简称RWD),看起来应该是不会出现错误,你也可以测试看看其他的iPhone大小。
STEP 5
在直立模式测试后,从菜单上的「Hardware」选择「Rotate Right」将装置往右翻90度。
如此一来就能测试网页在iPhone横向时显示的效果。
毕竟横向时宽度较大,可能浏览起来效果完全不同,但碍于行动装置的浏览面积有限,还是必须要设想到有些使用者可能习惯横向阅读,花点时间稍微检查、调整一下,以免浏览上出现问题。
67运营推荐的三个理由:
1、针对iPhone X屏幕尺寸大小和显示范围进行网站版型测试
2、使用Apple提供的开发工具Xcode内置许多装置模拟器
3、可测试iPhone、iPad、Apple TV和Apple Watch
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved