Je souhaite charger une page d'accueil différente en fonction de la taille de l'écran. Quelqu'un peut-il aider à ce sujet?Comment charger une page d'accueil différente en fonction de la taille de l'écran
Par exemple, pour taille de l'écran < 960 px Je veux afficher la page de destination par défaut comme index1.html et pour taille de l'écran> 960 px Je veux afficher la page de destination par défaut comme index2.html
Merci d'avance.
Vous avez étiqueté cette question responsive-design, mais vous vous demandez comment faire un "design adaptatif". La conception réactive consisterait à avoir une seule page HTML qui s'adapte au support dans lequel elle est affichée, par exemple en utilisant des requêtes média. Je n'entrerai pas dans un débat sur ce qui est le mieux, mais j'ajouterai ceci au cas où vous seriez intéressé par un design réactif pour que vous ayez quelques idées à google.
Une façon de faire ce que vous demandez est d'avoir un peu de JavaScript sur votre page qui vérifie la largeur de la fenêtre et réoriente si nécessaire:
// In index2.html
if (window.innerWidth < 960) {
window.location = "index1.html";
}
// In index1.html
if (window.innerWidth >= 960) {
window.location = "index2.html";
}
Merci monsieur. Cela semble fonctionner. Seul problème quand je redimensionne le navigateur, je dois recharger la page (Ctrl + F5). J'ai essayé la fonction window.resize(). mais ça n'a pas marché. – NikunjVala
Jetez un oeil à https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize - Il existe un événement window.onresize que vous pouvez définir. – AmericanUmlaut
Toutefois, vous pourriez vouloir considérer à quel point cela peut être gênant pour un utilisateur si votre site se recharge chaque fois qu'il ajuste la taille de l'écran. – AmericanUmlaut
Comme suggéré, je ferais cela avec un script basé sur une requête multimédia. Je recommande [Modernizr] (https://modernizr.com/docs) comme une solution légère si vous envisagez de faire de nombreuses requêtes ou de modifier les actifs en fonction des requêtes. Cela dit, même si je ne sais pas quel problème vous tentez de résoudre, je crois que la méthode de résolution va à l'encontre des principes du Web réactif. Que se passe-t-il lorsqu'un utilisateur passe d'une requête multimédia à une autre et vice versa? Comment gérez-vous la redirection des pages? Pensez à utiliser des blocs qui peuvent être réutilisés en tant que support de votre audience. J'espère que cela t'aides! –