(It will take at least 15–20 gigs to install both Xcode and one simulator. You’ll need several gigabytes of free disk space, both for Xcode and its simulator(s), and the time do download all of it, so be sure you have those resources before you start. The downside, however: this approach requires you to commit a lot of time and disk space up front. This option might seem extremely complex, but it’s not difficult, and it gives you a free, unlimited way to essentially use an iPhone on your Mac. So, if you want to cover all your bases, we need to go to our next option… The comprehensive option: Xcode device simulatorĭon’t panic. Plus, as mentioned, behavior between MacOS Safari and iOS Safari is not always perfectly 1:1. There’s no browser chrome (i.e., browser bar and navigation) or other iPhone UI shown, and you don’t see the shape or edges of the device-things that might have a significant impact on the user experience. However, this approach also has its limits. You can also rotate the screen to switch between portrait and landscape mode, or even imitate the size of an app in a split-screen scenario (e.g., one third of an iPad screen).Ĭredit where it’s due: this is an extremely nice feature to have built into desktop Safari. Click one, and the browser viewport will automatically resize to match the selected device. Once you do, you’ll see menu appear with a selection of iOS devices. (When in doubt, the latest iPhone available is probably a good place to start.)įinally, open the Develop menu again, and select “Enter Responsive Design Mode” (a few options below “User Agent”). Next, still in Safari, open Develop › User Agent, and choose the device you want to emulate. (This is required to access Safari’s dev tools, and because Apple hates web developers is geared towards casual users, this access is off by default.) Under the “Advanced” tab, make sure the “Show Developer menu in menu bar” option is checked. If you haven’t already, open Safari on MacOS and head to Safari › Preferences. It’s not perfect-and it’s missing some things-but it’s quick and easy if you already have a Mac on hand. Between the two of these features, MacOS Safari manages to replicate an iPhone environment with very high accuracy. Safari on MacOS offers a very helpful combination of features for testing and debugging: user agent emulation, and responsive design mode. The simple option: MacOS Safari user agent emulation either have access to an iPhone, or to a paid BrowserStack subscription.)įor the rest of us-working on a Mac, but without access to an iPhone or a paid subscription service-here are a couple of viable choices.Īnd as a preview: there’s a section at the end where I offer some thoughts on the current, inequitable state of affairs when it comes to debugging Safari. (I speculate that many developers in the U.S. I went down a rabbit hole of ways to address this issue, and found some solutions that don’t seem to be very popular for some reason-or at least, not widely discussed. It can at times behave very differently from MacOS (desktop) Safari. So when it comes to testing and debugging iOS Safari, my options are limited.Ĭompounding the problem: iOS Safari is very much its own beast. I, personally, have never owned one, and nobody in my household currently uses one. In my case, an iPhone is the missing piece. It’s just a fundamental truth of web development-one which presents a challenge for those of us who don’t have easy access to all relevant devices. No matter how much you’ve stretched and compressed your browser window to mimic the proportions of a mobile device, you haven’t really tested your project until you’ve tested on the device itself. You lean forward, staring through narrowed eyes at some bizarre mutation of your carefully crafted code. Is it the cache? Did you type the URL wrong? No… Maybe you even feel some denial and hit the refresh button once or twice. And so you grab an iPhone and pull up the staging URL. Suddenly, it occurs to you: you haven’t tested it on iOS yet. You’ve poured your heart and soul into it, and you’re close to launching it for the world to see. If you’re like me, you’ve experienced this more than once: you have a pristine new web project you’re excited about.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |