前端同一URL根據(jù)設備加載不同頁面的實現(xiàn)方案
前言
因為歷史的原因，公司內(nèi)部有一個系統(tǒng)針對手機端和電腦端分別做了一套前端的spa頁面，但是業(yè)務方還是希望通過不同設備訪問同一個地址的時候，手機端加載手機端的頁面，電腦端就去加載電腦端的頁面 該如何實現(xiàn)這該死的需求呢？
方案
問題拆解
問：定心想一下，要實現(xiàn)這個需求我們需要解決的最根本的問題是什么呢？
答：根本要解決的問題是區(qū)分不同的設備，對相同的URL地址，返回對應設備的入口html文件。
問：那該如何區(qū)分不同設備呢?
答：我們可以在nginx中，根據(jù)請求頭中的ua區(qū)分是移動端設備還是電腦端設備。
問：那具體該怎么配置呢?
具體配置
server {
listen 9999;
root /www/data/source;
# 默認入口是pc
set $index_file /index-pc.html;
if ($http_user_agent ~* "(android|iphone|ipad|ipod|mobile)") {
# 手機端入口
set $index_file /index-mobile.html;
}
if ($arg_isMobile != "") {
# 特殊需要 如果路徑上帶isMobile也加載手機端入口頁面
set $index_file /index-mobile.html;
}
location / {
# 順序匹配 默認匹配路徑 否則返回pc或mobile入口html
try_files $uri $index_file;
}
}
效果
電腦端訪問localhost:9999
手機端訪問localhost:9999
電腦端訪問localhost:9999?isMobile=1
解決
通過ua的判斷，針對相同的請求URL加載對應設備的入口html文件。
注意點
這個解決方案有一個要求是兩個端構(gòu)建后的資源需要上傳到同一個目錄下面，并且要修改入口html名稱區(qū)分不同端的入口。擔心靜態(tài)資源(js,css,img)混亂的話，可以在構(gòu)建的時候,把靜態(tài)資源也用目錄區(qū)分開，比如電腦端靜態(tài)資源構(gòu)建到pc目錄下，手機端的資源構(gòu)建到mobile目錄下。
結(jié)語
沒有最好的方案，只有最適合業(yè)務需求的方案。
總結(jié)
到此這篇關于前端同一URL根據(jù)設備加載不同頁面的文章就介紹到這了,更多相關前端同一URL加載不同頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了前端實現(xiàn)文字漸變的三種方式：CSS通過背景漸變與裁切實現(xiàn),Canvas利用createLinearGradient繪制,SVG通過定義漸變并應用到文字,CSS最常用,其他兩種適用于特定場景,需要的朋友可以參考下2025-07-07
js提交form表單,并傳遞參數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s提交form表單,并傳遞參數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了關于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
作為一項有意思的新技術，canvas給我們帶來了對網(wǎng)頁繪圖和網(wǎng)頁動畫的新革命。本文簡單介紹下canvas實用的功能，下面跟著小編一起來看下吧2017-01-01
下面小編就為大家分享一篇js判斷文件類型大小并給出提示的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
js 創(chuàng)建一個浮動div的代碼，一般用來指導用戶下面的操作與多條件選擇。點擊一下就可顯示，具體的大家可以自由發(fā)揮。2009-12-12
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個javascript新手，怎么說呢，先學的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過頭來學javascript面向?qū)ο缶幊?/div> 2012-03-03
這篇文章主要介紹了JS簡單封裝的圖片無縫滾動效果,結(jié)合完整實例形式分析了javascript針對圖片無縫滾動功能實現(xiàn)的具體操作技巧,包括鼠標事件響應、事件函數(shù)及頁面元素屬性動態(tài)變換等相關操作技巧,需要的朋友可以參考下2017-03-03
基于Bootstrap實現(xiàn)下拉菜單項和表單導航條(兩個菜單項，一個下拉菜單和登錄表單導航條)
這篇文章主要介紹了基于Bootstrap實現(xiàn)下拉菜單項和表單導航條(兩個菜單項，一個下拉菜單和登錄表單導航條)的相關資料,需要的朋友可以參考下2016-07-07
前端傳遞參數(shù)時form-data和json的區(qū)別詳解
前端可以通FormData對象實現(xiàn)表單形式提交數(shù)據(jù),下面這篇文章主要給大家介紹了關于前端傳遞參數(shù)時form-data和json區(qū)別的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11最新評論