2 html模板的移動和網頁設計

Question

對不起，如果這個問題是愚蠢的，但我想知道如何解決它我自己。我打算創建一個響應不同屏幕尺寸的網站。爲了實現這一點，我想我會創建一個2 HTML文件，1爲Web和另一個1爲移動。較大屏幕的設計與較小屏幕不同。我的問題是如何檢測應用程序站點是否在桌面或手機上打開，以便我可以區分應該呈現的是什麼html模板？任何幫助將非常感激。

Answer 1

「響應式」網頁設計是指根據屏幕大小使用css（或有時爲javascript）更改的單一佈局。

而不是創建2個HTML佈局，你應該堅持1並使用CSS來協助。

Chrck了這樣的解釋更多的細節：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Answer 2

我真的建議使用CSS響應的框架，如bootstrap而不是有2分開的文件，只是維持，這將佔用大量的時間，由於不必更改代碼兩次。

但是如果你還是想沿着這條路走下去，你可以使用JavaScript來檢測瀏覽器的寬度，並根據結果，你有2個選項

1. 重定向至m.domain一個子域。 COM
2. 更換頁面的模板的HTML內容你想

對於第一種選擇

if (document.body.clientWidth > 767) { 
    window.location = "http://m.yourdomain.com"; 
} 

對於第二個選項

if (document.body.clientWidth > 767) { 
    $('body').html(your template content here); 
}