• Snippets
  • Technique
Node.js : Comment ajouter un dépôt privé dans vos dépendances

  • Technique
PHP Tour 2017 à Nantes, deuxième jour de conférence !

  • Technique
PHP Tour 2017 à Nantes, retour sur le premier jour de la conférence...

#PHPTour, retour sur le premier jour de la conférence.

  • Technique
"php-crashers" : exemples de scripts qui déclenche une segmentation fault en PHP

Erreur de segmentation, qu'est-ce que c'est et dans quels cas sont elles déclenchées en PHP ? Un dépôt Github présente quelques exemples détaillés...

  • Développement
  • Technique
PHP Coding Standard Fixer ou comment nettoyer les namespaces inutiles en PHP ?

Aujourd'hui il existe des outils pour aider à produire un code propre et respectant une mise en forme normée, pourquoi ne pas essayer !

  • Technique
Désactivation de certaines fonctionnalités des navigateurs sur les sites non "sécurisés"

  • Serveur
  • Technique
Let’s Encrypt : une nouvelle autorité de certification libre, automatisée et ouverte

  • Développement
  • Technique
Comment cloner un objet en JavaScript

Toute assignation créé une référence et pas une copie. Ce comportement est standard dans la programmation mais en JavaScript on se perd facilement...

  • Serveur
  • Technique
Comment en finir avec l'édition du fichier hosts ?

Comment configurer un serveur DNS simple dans un environnement de développement ? En utilisant dnsmasq, un outil efficace qui permet de s'affranchir de l'édition du fichier hosts.

  • Développement
  • Technique
PHP 7: Installation sur une distribution Ubuntu Server

Plus d'excuse maintenant pour ne pas installer et utiliser PHP 7 sur votre serveur Ubuntu. Grâce à ce guide, vous pouvez suivre une procédure fiable et officielle sans passer par une compilation personnalisée.

  • Développement
  • Technique
Symfony, Composer et la configuration `platform`

Une erreur du type `overriden by "config.platform.php"` en installant vos dépendances composer ? Venez comprendre la configuration qui en est la cause et comment la dompter !

  • Développement
  • Technique
  • Tests unitaires
Atoum: Comment automatiser l'utilisation du fichier de `bootstrap` ?

J'ai utilisé atoum sur un projet récemment. Il m'a permis de découvrir une autre approche des tests unitaires, plus simple et efficace

  • Technique
On a testé Firefox Developer Edition !

Mozilla vient de présenter sa dernière nouveauté, Firefox Developer Edition. C'est un outil puissant qui intègre les dernières innovations pour aider les développeurs web au quotidien.

  • Technique
Contrôler l'installation des mises à jour de Wordpress

Il est intéressant de pouvoir limiter l'installation des mises à jour à certains utilisateurs pour contrôler les problèmes techniques qui peuvent en découler.

  • Technique
L'Ipad et les problèmes de redimensionnement des images hors viewport

L'Ipad et safari sur iOS n'autorisent pas par défaut l'application d'une image de fond qui dépasse du viewport, voici quelques astuces pour contourner ce problème.

  • Design
Prendre les bonnes décisions pour une interface plus efficace

Vous vous demandez pourquoi certaines interfaces web plaisent aux internautes et d’autres pas ?

  • Stratégie
Comment rédiger un brief efficace pour obtenir ce que vous voulez !

Vous souhaitez que votre projet aboutisse à la réalisation que vous imaginez ?

Mots Clés

  • Technique

26 juin 2013 par Stéphane Hulard

L'Ipad et les problèmes de redimensionnement des images hors viewport

J’ai récemment intégré plusieurs maquettes utilisant une large image de fond derrière le site. En réalisant les tests de compatibilité Ipad, je me suis rendu compte que le résultat était bien différent. L’image de fond était réduite par le navigateur pour éviter de sortir du viewport.

Pour contourner ce problème, j’ai essayé différentes techniques de positionnement d’image :

Chacune de ces méthode m’a donné exactement le même résultat. J’ai poursuivit mes recherches pour finalement trouver trois approches me permettant de répondre à mon besoin.

Assemblage

La première technique consiste à découper l’image de fond et l’assembler en plusieurs éléments. Ces éléments de taille réduite peuvent ensuite être géré indépendamment les uns des autres. Grâce aux détection de taille d’écran, on peut cacher ou ajuster les images pour que le fond du site reste cohérent et bien proportionné

Feuille de style spécifique

Par extension à la première solution, il est possible d’utiliser une feuille de style spécifique. Cette CSS peut intégrer une image de fond adaptée en fonction de la résolution d’écran (comme la taille de l’écran est fixe, il est facile de créer une image de la bonne taille).

La contrainte avec cette approche est qu’il faut créer deux images de fond différentes et qui seront potentiellement chargées dans la page. Le surplus de poids est considérable et pas très adapté à une utilisation mobile.

Propriété CSS

J’ai finalement trouvé une propriété CSS permettant de gérer ce cas spécifique, background-size. Cette propriété définit la taille à utiliser pour l’image définit en arrière plan.

Mon problème ne touche que les Ipad, j’ai donc utilisé la version préfixée pour ne cibler que ce type de périphérique.

Cette dernière technique fonctionne très bien! Dans mon cas c’est celle qui était la plus rapide et la plus adaptée à mettre en place…

Partager cet article


Soumettre un commentaire

Vous avez décidé de laiser un commentaire. C'est fantastique !
Votre adresse e-mail ne sera pas publiée, merci d'être passé !

(*) Champs obligatoires Envoyer

Votre commentaire a été soumis à validation