Transcript

00:10 hey everybody in this video we're going
00:11 to be looking at the device viewer stack
00:15 so basically you're going to add device
00:16 viewer wherever you want on the page and
00:19 there's not many settings here you can
00:21 either have it opened on page load um
00:24 you can remove it from popups which
00:26 we'll talk about in a little bit um if
00:29 it is not move from pop-ups you can
00:31 actually display it as a solo popup and
00:33 we'll talk about that and then you can
00:35 allow this to be published online or
00:38 most of the time we're only using this
00:40 for preview so you're you're going to
00:41 have this off I do want to add if you
00:43 are sure that you're actually done
00:46 testing your site you actually remove
00:47 the device viewer from the page because
00:50 even with publishing turned off there is
00:52 a small amount of java script that can
00:54 be published to your site so if you're
00:57 sure that you don't need it on a
00:58 particular page go ahead and REM remove
01:00 that now before we get started I
01:02 actually want to show you something
01:03 important if you're going to be using
01:05 Safari as your default browser by
01:07 default pop-up windows are blocked
01:09 inside Safari in order for them to
01:13 actually work inside preview you're
01:15 going to want to go into your website
01:18 tabs and your Safari preferences go to
01:20 popup windows and after you preview you
01:24 should see
01:26 1271 enabled or or displayed by default
01:30 it'll be block and notify just set that
01:32 to allow this will allow popup browsers
01:35 to actually work inside preview so when
01:39 you preview your Stacks page this will
01:41 then allow device viewer to actually
01:44 open up the pop-up windows so here we
01:47 are in preview Now by default it will
01:49 open on page load but if you were to
01:50 uncheck that it would basically look
01:52 like this on page load okay uh and then
01:55 you can click on this little button and
01:56 it will display now what's kind of cool
01:58 is whenever you start scrolling it will
02:00 autohide um on
02:02 scroll so when you're ready go ahead and
02:05 click on the select box and you can pick
02:08 any number of
02:10 devices and let's go ahead and choose
02:13 iPhone 10 and there we have our pop-up
02:16 window a pop-up window has come up with
02:19 a window with the exact dimensions of
02:22 that iPhone
02:23 10 now one thing you might notice is we
02:26 chose an iPhone 10 but in this Dropbox
02:28 it shows iPhone 11 Pro so in order to
02:32 help you test on a particular device
02:34 we've added every single possible iPhone
02:37 here but as you probably are aware many
02:39 iPhones actually have the same exact
02:41 resolution so when you choose a
02:45 resolution actually the most recent
02:47 iPhone with that resolution will be
02:49 displayed within the device
02:52 selector now what you'll notice here is
02:54 I'm currently in Safari and if I go
02:57 ahead and choose a different device
02:58 let's go ahead and choose an iPad 1
03:01 you'll notice that a new pop-up window
03:03 has been opened so this way you can
03:06 actually test on
03:08 multiple screens at once so if you want
03:11 to see how something displays on an
03:13 iPhone versus an iPad you can have them
03:15 side by
03:16 side another thing to notice is there's
03:19 actually a rotate button within the
03:20 device selector and if I click on that
03:23 it will then open up another screen that
03:25 has that particular same iPad but
03:28 rotated now if you recall in the
03:29 settings we saw a setting called solo
03:32 popup and unfortunately that feature
03:34 does not work in Safari and Safari will
03:37 only open up new popups for every single
03:40 new one let's have a look inside Firefox
03:42 and Chrome on how it
03:44 behaves so if you want to preview in
03:47 Firefox but yet your default browser is
03:49 something else go ahead and choose
03:51 option command p and this will open up
03:54 preview in browser go ahead and select
03:56 Firefox and say preview at this point it
03:59 shows you our preview and we can choose
04:01 which device we would like to preview
04:02 from let's go ahead and choose any
04:04 device here and now we have our actual
04:08 device we can go and close the main
04:09 Firefox window and what's cool here is I
04:12 can now choose and it'll use the same
04:15 window so I CH chose landscape it just
04:18 used the same exact window I can go
04:20 ahead and choose a new device let's go
04:21 ahead and choose an
04:24 iPad as you see there it actually just
04:27 uses and resizes the existing window
04:30 um this functionality currently isn't
04:32 available in Safari um we filed a bug
04:34 report so hopefully it will get
04:36 resolved and just a quick reminder also
04:39 if you're in a layout and you just
04:41 scroll the actual device selector will
04:43 be hidden so that it doesn't interfere
04:45 with you testing and viewing your
04:47 layouts so if you prefer the Safari
04:50 behavior in all browsers just go ahead
04:51 and turn solo popup off and lastly let's
04:55 show you what remove from popups does so
04:59 here you here we are in preview and
05:00 remember I've turned on the remove from
05:03 popups so let's go ahead and and pick a
05:05 device and what you'll notice is in the
05:08 pop-up windows that come there is no
05:10 device selector so it's not possible to
05:13 actually continue and modify it from
05:16 here basically if I wanted a new one I'd
05:18 have to close that go to the next uh
05:21 window and then launch a new
05:24 device I personally prefer having it
05:27 inside of the pop-up Windows because
05:28 then it kind of gives me an idea I can
05:30 see exactly which device I I selected um
05:34 and I if I scroll it just kind of moves
05:36 out of the way anyway so I can still see
05:38 and visualize my designs um so I do
05:41 prefer it with it there but I wanted to
05:43 give you guys the option to actually
05:44 remove it completely uh from the pop-up
05:57 windows