因為現在終端的多樣化，多用戶商城系統也需要適配不用用戶需求的端口，以方面不同的用戶人群的訪問，因此商淘的wstmart多用戶商城系統推出了八大端口的配置，在最大可能的滿足不同用戶的訪問需求，那麽商淘多用戶商城系統要如何識別電腦訪問還是手機瀏覽器訪問（頁面如何自適應不同的訪問終端），接下來就給大家講講實現原理及代碼說明。

Wstmart多用戶商城系統是通過全局變量$_SERVER['HTTP_USER_AGENT']來識別是電腦訪問還是手機瀏覽器訪問。

網頁自適應不同的訪問終端需要用到響應式布局。

1、在多用戶商城網頁代碼的頭部，加入一行viewport元標簽。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。

2、由於多用戶商城源碼會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。

具體說，CSS代碼不能指定像素寬度：

width:xxx px;

只能指定百分比寬度：width: xx%;或者width:auto;

3、相對大小的字體

多用戶商城源碼的字體也不能使用絕對大小（px），而只能使用相對大小（em）。

body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

h1 {font-size: 1.5em;}

然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

small {font-size: 0.875em;}

small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

4、選擇加載CSS

商淘wstmart多用戶商城系統實現“自適應網頁設計”的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然後加載相應的CSS文件。

<link rel=”stylesheet” type=”text/css”

media=”screen and (max-device-width: 400px)”

href=”tinyScreen.css” />

上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。

<link rel=”stylesheet” type=”text/css”

media=”screen and (min-width: 400px) and (max-device-width: 600px)”

href=”smallScreen.css” />

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

5、除了用html標簽加載CSS文件，還可以在現有CSS文件中加載。

@import url(“tinyScreen.css”) screen and (max-device-width: 400px);

6、CSS的@media規則

同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則。

@media screen and (max-device-width: 400px) {

.column {float: none;width:auto;}

#sidebar {display:none;}

}

上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

以上就是關於商淘wstmart多用戶商城系統如何識別電腦訪問還是手機瀏覽器訪問（頁面如何自適應不同的訪問終端）的實現原理及代碼說明，若是還有什麽疑問，或想要了解關於商淘wstmart多用戶商城系統的更多詳細操作說明及設置講解，或想要開發一套屬於自己的多用戶商城系統，可以登錄商淘軟件的官方網站進行咨詢查閱的哦。