如何根據屏幕大小加載不同的主頁

-2

我想根據屏幕大小加載不同的主頁。任何人都可以幫忙嗎？如何根據屏幕大小加載不同的主頁

例如對於屏幕尺寸< 960像素我想顯示默認着陸頁作爲index1.html 和爲屏幕大小> 960像素我想顯示默認着陸頁作爲index2.html

提前致謝。

2017-01-27 NikunjVala

至於建議，我會用一個腳本來完成基於媒體查詢。如果您打算根據查詢進行許多查詢或更改資產，我建議將[Modernizr]（https://modernizr.com/docs）作爲輕量級解決方案。這就是說，雖然我不知道你想要解決什麼問題，但我認爲解決方法違背了響應式Web的原則。當用戶從一個媒體查詢轉到另一個媒體查詢時會發生什麼？你如何處理重定向頁面？考慮使用可作爲受衆變化媒介的功能塊。希望這可以幫助！ –

你已經標記了這個問題responsive-design，但你在問怎麼做「自適應設計」。響應式設計會有一個單獨的HTML頁面，用於調整媒體查詢的媒體內容。我不會討論哪一個更好，但我補充一點，以防你對快速響應式設計感興趣，以便你對谷歌有一些想法。

辦法做到你所要求的是讓你的頁面上的一些JavaScript，檢查窗口的寬度和重定向如果必要的話：

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

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

來源

2017-01-27 17:01:26 AmericanUmlaut

謝謝先生。它似乎工作。唯一的問題是當我調整瀏覽器的大小時，我必須重新加載頁面（Ctrl + F5）。我試過window.resize（）函數。但它不起作用。 – NikunjVala

查看https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize - 您可以定義一個window.onresize事件。 – AmericanUmlaut

但是，如果您的網站在每次調整屏幕大小時都會重新加載，您可能會想到，用戶可能會感到煩惱。 – AmericanUmlaut

如何根據屏幕大小加載不同的主頁

回答

相關問題