Aller au contenu

Optimizing your layout for phones and tablets using viewport and media queries

Par Andreas Bovens

Langue :
Français
Sous-titres :
Français

Télécharger la vidéo

  • Diaporama
  • Liens connexes

    Le sujet

    With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern mobile browsers that help web designers to create compelling experiences on phones and tablets.

    In my talk, I will cover the various features of the viewport meta tag, and look at how they allow you to control mobile browsers' zoom behaviors. I'll also connect this to Opera's CSS Device Adaptation proposal, which brings this feature to CSS in the form of the @viewport rule.

    Furthermore, I will explain how viewport can be combined with media queries to create super-flexible layouts that work nicely across different browsing contexts and devices, and explore various strategies to dealing with different screen sizes and pixel densities.

    Maintenant que le fait de naviguer sur Internet à en étant mobile est devenu une réalité, les utilisateurs s'attendent à ce que leurs sites préférés fonctionnent sans problème sur leur appareil mobile. Nous entrons dans une ère passionnante, car les navigateurs mobiles modernes disposent de nombreuses fonctionnalités qui aident les designers web à concevoir une expérience mobile (sur téléphone ou tablette) plus intéressante.

    Lors de cette conférence, je parlerai des différentes possibilités offertes par la balise meta "viewport", et montrerait comme elle vous permettent de contrôler le comportement du zoom des navigateurs mobiles. Je ferai également le lien avec la proposition d'Opera nommée CSS Device Adaptation, qui apporte cette fonctionnalité aux CSS, sous la forme d'une règle @viewport.

    NB : cette conférence sera en anglais avec traduction simultanée.

    Présenté par