Affichage du contenu en fonction de la résolution d'écran

J'ai un site Web avec du contenu. Basé sur la résolution de l'écran des utilisateurs, je veux montrer un contenu différent afin que les appareils mobiles auront un autre contenu, mais le reste du site sera le même. J'ai fait quelques recherches, et il semble que la seule façon possible est avec javascript. Je code PHP la plupart du temps, donc j'ai vraiment du mal à javascript, donc ce serait bien si quelqu'un pouvait me fournir un script simple.Affichage du contenu en fonction de la résolution d'écran

Ce que je besoin est une fonction javascript comme ceci:

if (screen resolution < X x X) { 
show some content... 
} else { 
show some other content ... 
}

Si javascript est désactivé, il devrait juste montrer un autre contenu .. :) Je peux installer jquery si ça aide. Merci

Ce serait bien avec des exemples pour le code html aussi.

Source

2011-09-01 2by

Une question a été posée il y a identique environ 5 heures. Je suis sûr que quelqu'un d'autre peut le trouver depuis que j'ai échoué. – Layke

vous ne devriez pas détecter si l'utilisateur est sur un appareil mobile avec javascript. Je vous recommande ceci en PHP. vous pouvez utiliser [$ _SERVER 'HTTP_USER_AGENT'] puis simplement analyser la chaîne pour voir quel type d'agent utilisateur elle est. Je suis en train de mettre en œuvre ce même concept en ce moment.

vous pouvez également utiliser cette classe Mobile Detect

include("Mobile_Detect.php"); 
$detect = new Mobile_Detect(); 

if ($detect->isMobile()) { 
    // any mobile platform 
}

Source

2011-09-01 00:08:04

Sonne comme une bonne idée, mes soucis est que je dois faire une longue liste avec les user_agents mobiles, ou y at-il un moyen intelligent de détecter ce ? – 2by

J'ai donc trouvé ce script php pratique http: // detectmobilebrowsers.mobi/ – 2by

Vous pouvez utiliser la correspondance preg et rechercher des mots clés comme iphone, ipod, andriod. ou utilisez cette classe. http://code.google.com/p/php-mobile-detect/ –

vous devriez essayer les requêtes médias CSS à la place

Source

2011-09-01 00:02:52 szajmon

Avez-vous des exemples? – 2by

En ne savent pas de PHP, mais en .Net vous pouvez détecter un peu qu'ils sont un visiteur mobile et vous pouvez les rediriger vers une section mobile du site.

Ensuite, tout ce que vous avez vraiment besoin de faire est d'écrire le petit site en utilisant vos contrôles web existants, etc. Encore une fois, ne savez pas si vous avez ce concept en PHP, mais j'imagine que vous le feriez.

Source

2011-09-01 00:04:04 griegs

Je ne sais pas non plus, mais cela pourrait être une solution. En ce moment, je veux garder le même site/design si, juste quelques vidéos devraient être différentes de l'appareil mobile – 2by

Ah ok. Si le site est petit alors oui cette solution peut être surpuissante – griegs

Vous pouvez utiliser les requêtes de média CSS pour cibler différentes résolutions d'écran. par exemple:

@media only screen and (max-device-width: 1024px) and (orientation: landscape) { 
    /* iPad in landscape orientation css */ 
} 
@media only screen and (max-device-width: 480px{ 
    /* iPhone css */ 
}

Plus d'infos: http://mislav.uniqpath.com/2010/04/targeted-css/ http://webdesignerwall.com/tutorials/css3-media-queries

Source

2011-09-01 00:05:34 marissajmc

Merci, cela pourrait être utile un certain temps. En ce moment j'ai besoin de changer le contenu html, je ne pense pas que je peux le faire avec CSS – 2by

Découvrez CSS à des règles. Ils vous permettent de spécifier des largeurs maximales et minimales pour un "espace de nommage" de règles CSS, à l'intérieur duquel vous pouvez avoir des règles différentes pour les petits écrans. Mais soyez prudent lorsque vous utilisez ceux-ci, car IE n'aime pas soutenir les bonnes choses.

@media screen, projection and (max-device-width: 800px) {} 
@media screen and (max-device-width: 300px) {}

Sur un projet sur lequel je travaille, nous redirigeons en fait une version mobile de la page si l'agent utilisateur contient certains mots-clés (vérifier les en-têtes HTTP de JS), et d'utiliser une feuille de style différent complètement .

Source

2011-09-01 00:07:04 Art

Affichage du contenu en fonction de la résolution d'écran

Répondre

Questions connexes