Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
hi everyone so as did you mentioned I'm Vicki merly and this is no your platform desktop versus mobile so who here in the room has been working had the experience of working on a desktop site and then you go and view it on a mobile device or interact with
it on a mobile device and something unexpected happens raise your hands a lot quite a few people in the audience have had this experience well that's what I'm here to do mobile devices and browsers on mobile devices differ from the desktop experience
so I'm going to cover three main areas first I'm going to talk about fundamental differences between desktop and mobile browsers after that I'm going to talk about how to optimize for mobile displays and get into some very specific information
and finally I'm going to talk about how some platform differences can affect key technologies that you're going to be using in your mobile sites and mobile web apps so before I begin I just want to issue a quick caveat Divya mentioned that i worked
at Apple for a really long time it was actually over 10 years and I did a quick calculation before I got here and I found that it was 2685 days that I worked at Apple and that's actually working days weekends and holidays are not included so my experience
since then has been 15 and I actually spent a little t-shirt and goofing like 10 days and I'm just pointing that out because most of the examples that I'm going to cover today are going to be illustrated in Safari because that's obviously where
the majority of my experience lies but I don't think that's going to be too big of a problem because I see lots of iPads and iPhones in the audience okay so let's get started understanding fundamental differences between desktop and mobile browsers
okay so a typical web page will look like this when viewed in your desktop browser so how does a mobile browser take this desktop this page that's intended for a desktop machine and a desktop browser and put it on to a mobile display well what happens
is a width of 980 pixels is assumed and then that content is scaled down to the width of the device so in the case of an iphone that would be 320 pixels so now we have an eight 980 pixel page scaled down to 320 pixels and that's giving us a scale factor
of 0.3 2653 approximately 320 / 980 so on the desktop the user interaction is different as well if I want to see more of the page I can use the scroll bar I've highlighted it in green here so that you can see it even better I can scroll up and down or
I can grab the corner of the window and resize and what's actually happening here there's a few things happening behind the scenes first there's the window of the application and there's also this thing called the viewport and when you are
scrolling or resizing the window you're actually behind the scenes resizing the window and resizing the viewport so on a desktop browser the window and the viewport are the same thing and they're both resizable on mobile the story is a little bit different
we still have these two things the window of the application and the viewport but for a user to see more of the page the interaction is completely different so they may double tap to zoom in or pinch to zoom in and when they do that we still have this window
that is a fixed size that we're sort of using to peer peer through and see the content of the page and then when we double tap the viewport dimensions are actually staying the same size but the scale is changing and then of course the user can you know
pan left or right to see more of the page so on the desktop the window and viewport have a changeable size changeable by the user and on mobile device the viewport is a fixed size and the scale of the viewport changes so why is this important to you web developers
well this is really a fundamental piece of knowledge about how mobile browsers operate and you can control the size of the viewport with a meta tag and this allows you to tell the browser exactly how much space is needed to lay out your content so here is
an example meta tag for the viewport its meta name equals viewport and content and here I'm setting the width equal to 400 pixels so I'm telling the browser that I'm going to need 400 pixels across to lay out my page this is great if you ever have
a page that's intended for the desktop and maybe you have some white space down on the right-hand margin you can set a viewport tag to really maximize your screen real estate and fill the entire page without having to go through the slightly more intensive
process of defining custom CSS for a mole full page and of course this lets you really achieve perfect layout for your web apps something that is you know for a specific person purpose looks more like an app you want that way out to be exactly as you intend
it so this kind of eliminates the guesswork and of course as we saw earlier the viewport also scales on mobile devices so you can customize that scaling behavior in this viewport meta tag so with is one of our viewport tag settings and let's take a look
at the rest of them and also take a look at their default and minimum and maximum possible values so with has a default of 980 the minimum is 200 and the maximum is 10,000 height is a calculated height so if you're setting the width to any value the height
if it's not set is going to be calculated for you and the minimum height is 223 and the maximum is 10,000 pretty tall here are those scaling settings that i mentioned you can set the initial scale the minimum scale and the maximum scale i mentioned on
one of the first slides that if a width of 980 pixels is assumed then the initial scale is calculated to be about point 3 so that's what it means here when it says the default value of initial scale is calculated you can also set a minimum or maximum scale
to control how far our user can zoom in or out and those values by default are point 25 and 5 respectively finally there's one more setting which you can use to turn off scaling altogether and that's user scalable the default value is yes and the other
possible values value is no obviously another thing that you need to know about the viewport is that there's this thing called the device with content and what the device with content does is it is a constant that map the viewport width to the actual width
of the device so device with on an iPhone would map to 320 pixels and device with on an iPad would map to 768 pixels I think device with is really handy when you want to have that kind of one-to-one ratio between you know your CSS pixels and what you're
[ ... ]
Nota: se han omitido las otras 3.338 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.