我正在嘗試將我的移動用戶和所有小設備用戶重定向到我的移動版網站。 但我不喜歡更改我的網址。 像下面的例子,如何在不更改URL的情況下重定向到移動版網站?
桌面版本:domain.com(用現場的桌面版本)
移動版本:domain.com(與網站的移動版本)
我正在嘗試將我的移動用戶和所有小設備用戶重定向到我的移動版網站。 但我不喜歡更改我的網址。 像下面的例子,如何在不更改URL的情況下重定向到移動版網站?
桌面版本:domain.com(用現場的桌面版本)
移動版本:domain.com(與網站的移動版本)
感謝大家的評論我的問題。 現在,我寫我的答案給自己,我發現我的問題的答案。
響應設計不是它的答案。你必須展示一個移動版本的網站,而不是網站的響應版本。所以使用
@media()
沒有用。
對於這個問題,您必須檢測用戶的設備在您的後端。例如在PHP中,您可以使用mobile-detect。 而且您可以檢測到您的設備並顯示該設備的模板。
此外,移動偵測有一個js版本。 click here 我希望你在這裏找到你的答案。
重定向裝置改變窗口位置。
因爲你不想有一個單獨的移動網站, 唯一可行的解決方案是使用一個良好的響應ui框架,如bootstrap。但在你提到wordpress的標籤中,我感覺大多數wp主題實際上都是響應式的。
不管怎麼說,如果你想設計一個響應site.or使用引導,或另一種選擇是寫所有使用媒體查詢的CSS。 希望有所幫助。
響應是件好事。 但是在一些網站,我們想改變所有的用戶界面,所以需要不同的輸出。 –
它還是很簡單的。只需在同一頁面中將手機和桌面的html一起寫入,並在您的CSS媒體查詢中,將「display:none」設置爲不屬於該設備的所有元素。 – reevkandari
用css在頁面上隱藏大部分是不好的做法... 手機不需要隱藏部分,它浪費帶寬和渲染時間。 –
您需要替換此「即時」網站的主題。
你可以用代碼來執行,但它太長了,使用這個插件,而不是device theme switcher
網址都應該是相同的,他們是在他們的情況也是相同的。做得好 !
現在,爲了自動呈現特定佈局,請藉助媒體查詢。
參考
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
它們定義了特定的寬度範圍內,只有拿起這些特定的風格。
所以你有很多工作要做。
這是一個最佳的工作方式,這被稱爲響應式設計。
你可以找到n
沒有相同的教程。但要實驗只需要一個或兩個媒體查詢。
此外,閱讀meta標籤使挑寫在樣式表https://css-tricks.com/snippets/html/responsive-meta-tag/
好運那些媒體的質疑!
在WordPress上定製頁面時,可以在左下角看到您的網站在手機或平板電腦中的樣子。
此外,像Elementor這樣的一些頁面構建器允許您控制在哪些屏幕上顯示哪些部分。
更好的方式來陳述您的問題的問題是,如何使頁面響應?
當閱讀關於Grid Systems
時,您會驚訝於如何簡單地改變div的方向,可以使用戶體驗差異巨大。 當使用框架,使用Grid Systems
,Bootstrap
是受歡迎的之一,你可以想象任何屏幕分爲12列(網格)。然後,您可以通過添加類來指定div在每個屏幕大小上所佔的多少部分。例如,<div class = "col-sm-6 col-lg-3" </div>
將覆蓋屏幕(水平)在小屏幕(6是12的一半)和四分之一的大屏幕。
這個操作背後的原因是爲了讓左右滾動更容易導航。 希望這篇文章能夠讓你瞭解一下你需要尋找什麼來製作適合移動設備的網站。祝你好運!
爲什麼不使用基於Bootstrap的網站? 這裏是鏈接:http://getbootstrap.com/
但是,如果你不想代碼,使用Mobirise網站製作例如 https://mobirise.com/ 他們可以免費使用也有幾個引導的主題。
你可以通過'htaccess'重寫URL做工作 – prasanth
其中*是你的手機版本的網站?如果您不告訴我們您需要將*重定向到*的位置,我們無法給您一個準確的答案。您的手機版本是不同的網站還是桌面版本的一部分? – FluffyKitten