如何根据屏幕尺寸加载不同的主页 [英] How to Load Different Home Page according to screen size

问题描述

我想根据屏幕尺寸加载不同的主页.有人可以帮忙吗?

I want to load different home page according screen size. Can anyone help about it ?

例如， 屏幕尺寸< 960像素我想将默认登录页面显示为index1.html 和 对于大于960像素的屏幕，我想将默认目标网页显示为index2.html

For Example, for screen-size < 960 px I want to display default landing page as index1.html and for screen-size > 960 px I want to display default landing page as index2.html

谢谢.

推荐答案

您已经标记了该问题responsive-design，但是您正在询问如何进行自适应设计".响应式设计将只有一个HTML页面，该页面可以调整到正在查看的媒体，例如通过使用媒体查询.我不会就哪种更好的问题进行辩论，但我添加了这一点，以防您对响应式设计感兴趣，以便您对Google有一些想法.

You've tagged this question responsive-design, but you are asking about how to do "adaptive design." Responsive design would be having a single HTML page that adjusts to the medium it is being viewed in, for example by using media queries. I won't get into a debate about which is better, but I add this in case you're interested in responsive design so that you have some ideas to google.

一种执行要求的方法是在页面上放置一些JavaScript，以检查窗口的宽度并在必要时重定向:

A way to do what you are asking is to have a bit of JavaScript on your page that checks the width of the window and redirects if necessary:

// In index2.html
if (window.innerWidth < 960) {
    window.location = "index1.html";
}

// In index1.html
if (window.innerWidth >= 960) {
    window.location = "index2.html";
}

这篇关于如何根据屏幕尺寸加载不同的主页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！