Modifier l'intégralité du contenu du site en fonction de la résolution du moniteur

Question

Dans mon site, j'applique une feuille de style en fonction de la résolution du moniteur de l'utilisateur. En utilisant screen.width en javascript, je fais cela. Mais maintenant j'ai un doute que je peux utiliser la même technique pour changer tout le contenu du site en fonction de la résolution, c'est-à-dire, pour des résolutions plus élevées, plus de contenu et pour moins, moins. Ou vous me suggérez s'il vous plaît une autre technique pour le faire.

Answer 1

Vous pouvez détecter la résolution et l'utiliser pour appliquer une classe au corps de votre page et l'utiliser pour indiquer à CSS d'afficher/masquer certaines colonnes. Je peux fournir un exemple de code si vous me faites savoir quel framework/aucun framework vous travaillez.

Voici reallly exemple de base en javascript simple:

window.onload = function(){ 
var resolution = 'res'+screen.width; 
document.getElementsByTagName('body')[0].className= resolution; 
} 

Cela a aussi l'avantage d'une page affiche toujours indépendamment du fait que JavaScript est activé ou non. Si JavaScript est activé, vous pouvez adapter la page à la résolution, sinon l'utilisateur verra toujours votre contenu.

Answer 2

Demandez à votre chargement de page initial retourner un conteneur vide et exécuter un appel ajax qui le peuplera avec le contenu. L'appel ajax peut passer la résolution en paramètre afin que vous puissiez retourner le contenu approprié en conséquence.

Answer 3

Comme vous utilisez déjà des feuilles de style alternatives en fonction de la largeur de l'écran, vous pouvez simplement définir le contenu que vous ne voulez pas pour cette feuille de style donnée à display:none.