web-dev-qa-db-fra.com

Comment rendre mon site Web mobile et tablette compatible?

Je souhaite que mon site Web existant s'ajuste automatiquement lorsqu'il est affiché sur des mobiles, des tablettes ou même lorsque vous ajustez votre écran sur un ordinateur de bureau.

A défaut, si c'est trop difficile, quelles suggestions avez-vous ?? Je veux essentiellement une version ipad et iphone (Android) qui utilise la même URL, avec une auto directe lorsque les navigateurs mobiles sont détectés.

Merci beaucoup

8
Darron Donaldson

Vous recherchez une conception de sites Web réactifs! Commencez avec MediaQueries http://mediaqueri.es/

Consultez également ceci pour une meilleure compréhension

http://www.slideshare.net/zomigi/building-responsive-layouts-15508821

12
Anbu

En plus de ce que les autres ont répondu, pour les sites mobiles, vous avez deux options de base.

Vous pouvez avoir des sites de bureau et mobiles distincts, ou un site réactif unique qui fonctionne sur tous les appareils.

Pour la première option, vous pouvez rediriger les utilisateurs mobiles vers une URL complètement différente où vous hébergez une version mobile uniquement du site. Pour ce faire, vous pouvez gérer la redirection avec quelque chose comme http://detectmobilebrowsers.mobi/ ou il existe de nombreuses variantes de redirection avec des fichiers .htaccess.

Jquery Mobile est un très bon moyen de développer le site uniquement mobile après cela.

Cette approche a l'avantage qu'il est plus facile de développer une version légère uniquement mobile de votre site. Un inconvénient est que vous aurez deux sites Web à entretenir - ordinateur de bureau et mobile.

L'autre option est l'approche réactive que d'autres ont suggérée. Ici, vous avez essentiellement le seul site qui reconfigure en fonction de la taille de la veuve du navigateur du visiteur. Bootstrap et Foundation sont deux excellentes options, et il y en a aussi beaucoup d'autres.

Les sites réactifs s'appuient sur les requêtes des médias pour connaître la taille de la fenêtre. Ceci est bien pris en charge dans les navigateurs modernes, mais il y aura des problèmes avec les navigateurs plus anciens que vous devrez peut-être contourner. Certains des avantages d'un site réactif sont que vous ne maintenez qu'un seul site, et en théorie, cela fonctionne pour toutes les tailles d'écran et de fenêtre, donc cela ne posera pas de problème lorsque le prochain appareil mobile avec une taille d'écran différente sera libéré.

Bonne chance, c'est un moment intéressant pour faire du web design.

8
David Taiaroa

Vous devez regarder dans responsive design . Il existe de nombreux frameworks open source gratuits qui peuvent vous aider à démarrer, le plus populaire étant peut-être bootstrap et foundation .

2
juco