{"id":3939,"date":"2014-03-16T13:33:59","date_gmt":"2014-03-16T12:33:59","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3939"},"modified":"2014-03-16T14:08:23","modified_gmt":"2014-03-16T13:08:23","slug":"meta-viewport-minimal-ui","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/meta-viewport-minimal-ui","title":{"rendered":"Meta viewport Minimal-UI"},"content":{"rendered":"

Il y a quelques jours est sortie la version 7.1 de iOS, apportant avec elle son lot de bugs (typo<\/a> et bug<\/a>) et de nouveaut\u00e9s. Parmi ces derni\u00e8res, la meta viewport peut d\u00e9sormais accueillir la valeur minimal-ui<\/code> qui permet de cacher une partie des \u00e9l\u00e9ments d’interface du navigateur.<\/p>\n

Trois semaines avant d’\u00e9crire cet article, je cherchais un moyen de r\u00e9duire la barre d’adresse et les actions en pied de page pr\u00e9sentes dans le chrome du navigateur Safari sur iPhone. J’avais test\u00e9 l’ancienne technique qui consistait en JS \u00e0 simuler un petit d\u00e9filement pour forcer la barre d’adresse \u00e0 disparaitre, mais cela ne fonctionnait pas. Dans mes recherches, j’avais trouv\u00e9 des informations sur les fonctionnalit\u00e9s \u00e0 venir, dont la valeur minimal-ui<\/code> de la meta-viewport<\/code>.<\/p>\n

Aujourd’hui c’est chose possible puisque la fonctionnalit\u00e9 est en place depuis iOS 7.1.<\/p>\n

Cependant n’oubliez pas que certains utilisateurs ne peuvent ou n’ont pas fait cette mise \u00e0 jour.<\/p>\n

Utilisation de la meta-viewport<\/code> et minimal-ui<\/code><\/h2>\n

Il y a toujours des d\u00e9bats sur les meilleures valeurs de base pour une meta-viewport<\/code> \u00ab\u00a0passe-partout\u00a0\u00bb. Je ne souhaite pas rentrer dans ces d\u00e9tails.
\nPour ma part j’utilise la meta suivante, et cela se passe tr\u00e8s bien.<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/pre>\n
Pour permettre \u00e0 Safari de planquer une grosse partie des chromes du navigateur, il suffit de rajouter l’information minimal-ui<\/code> \u00e0 la suite des valeurs existantes :<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimal-ui\"><\/code><\/pre>\n
Vous obtiendrez ainsi une vue plus grande au chargement des pages de votre site web.<\/p>\n
\"Avant
Avant l’insertion de minimal-ui<\/code><\/figcaption><\/figure>
\"Apr\u00e8s
Apr\u00e8s l’insertion de minimal-ui<\/code><\/figcaption><\/figure><\/p>\n
Il suffit ensuite pour l’utilisateur de toucher le bandeau sup\u00e9rieur pour faire r\u00e9apparaitre la barre d’adresse et le menu de pied de page.<\/p>\n
Toucher la zone de bas de page ou remonter dans la page web ne fait plus appara\u00eetre les \u00e9l\u00e9ments cach\u00e9s par cette m\u00e9thode.<\/p>\n
Amusez-vous bien !<\/p>\n","protected":false},"excerpt":{"rendered":"
Il y a quelques jours est sortie la version 7.1 de iOS, apportant avec elle son lot de bugs (typo et bug) et de nouveaut\u00e9s. Parmi ces derni\u00e8res, la meta viewport peut d\u00e9sormais accueillir la valeur minimal-ui qui permet de cacher une partie des \u00e9l\u00e9ments d’interface du navigateur.<\/p>\n","protected":false},"author":4,"featured_media":3946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[221,580,403,410,518],"coauthors":[],"class_list":["post-3939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-ios","tag-mobilite","tag-responsive","tag-smartphone","tag-viewport"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3939"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3946"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3939"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}