PHP語言手機(jī)端PC端自適應(yīng)與響應(yīng)式開發(fā)技術(shù)

時(shí)間：2023-05-31 02:15:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-31 02:15:01 來源：網(wǎng)站運(yùn)營

PHP語言手機(jī)端PC端自適應(yīng)與響應(yīng)式開發(fā)技術(shù)：一、PHP如何判斷手機(jī)端與PC端

開發(fā)公司網(wǎng)站的時(shí)候，需要判斷客戶是手機(jī)端還是電腦pc端，對于不同的設(shè)備給予不同的頁面訪問。以下方法可以判斷是電腦端還是手機(jī)端，該方法返回為字符串"1"時(shí)為手機(jī)端，返回為"0"時(shí)為電腦端。^[1]



function isMobile() { // 如果有HTTP_X_WAP_PROFILE則一定是移動設(shè)備 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { return "1"; } // 如果via信息含有wap則一定是移動設(shè)備 if (isset ($_SERVER['HTTP_VIA'])) { // 找不到為flase,否則為true return stristr($_SERVER['HTTP_VIA'], "wap") ? "1" : "0"; } // 腦殘法，判斷手機(jī)發(fā)送的客戶端標(biāo)志,兼容性有待提高 if (isset ($_SERVER['HTTP_USER_AGENT'])) { $clientkeywords = array ('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile' ); // 從HTTP_USER_AGENT中查找手機(jī)瀏覽器的關(guān)鍵字 if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) { return "1"; } } // 協(xié)議法，因?yàn)橛锌赡懿粶?zhǔn)確，放到最后判斷 if (isset ($_SERVER['HTTP_ACCEPT'])) { // 如果只支持wml并且不支持html那一定是移動設(shè)備 // 如果支持wml和html但是wml在html之前則是移動設(shè)備 if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) { return "1"; } } return "0"; }



二、自適應(yīng)的概念基于PHP技術(shù)的多客戶端自適應(yīng)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

十幾年前，著名的外國Ethan Marcotte教授提出了自己對網(wǎng)頁方面的一個(gè)論點(diǎn)就是“自適應(yīng)網(wǎng)頁設(shè)計(jì)”（Responsive Web Design）這個(gè)專有名詞，可以在設(shè)計(jì)網(wǎng)頁的時(shí)候讓網(wǎng)頁在設(shè)備顯示的時(shí)候，自動識別屏幕的寬度、而且做出調(diào)整相應(yīng)網(wǎng)頁的設(shè)計(jì)。 他本人做出了一個(gè)非常有意思實(shí)驗(yàn)，就是把幾張主人公的頭像都進(jìn)而制作設(shè)計(jì)成網(wǎng)頁中，當(dāng)這些頭像圖片并排在一行時(shí)，說明屏幕的寬度大于1300像素。當(dāng)這些頭像圖片分成兩行時(shí)，說明屏幕的寬度在600像素到1300像素之間。當(dāng)導(dǎo)航欄有些偏移到網(wǎng)頁的頂部時(shí)，說明屏幕寬度在400像素到600像素之間。當(dāng)這些頭像圖片分成三行，說明屏幕的寬度在400像素以下。

2.1自適應(yīng)的發(fā)展方向與應(yīng)用

現(xiàn)在為什么需要自適應(yīng)網(wǎng)頁設(shè)計(jì)？
因?yàn)椤翱萍紩r(shí)代已經(jīng)來臨，一步一步的向前發(fā)展，不斷的有各種各樣的新型設(shè)備（手機(jī)/平板電腦/手環(huán)）、平臺和瀏覽器都需要各種網(wǎng)站的網(wǎng)頁能夠兼容顯示。自適應(yīng)網(wǎng)頁設(shè)計(jì)決定了一種必然的設(shè)計(jì)趨勢，在現(xiàn)如今年所有的網(wǎng)站都將采用自適應(yīng)網(wǎng)頁設(shè)計(jì)。
那么是誰在使用自適應(yīng)網(wǎng)頁設(shè)計(jì)呢？其實(shí)不管是用在演示、還是流行設(shè)計(jì)和頁面美化中。而今大量的網(wǎng)站已經(jīng)采用了自適應(yīng)網(wǎng)頁設(shè)計(jì)。何時(shí)需要采用自適應(yīng)網(wǎng)頁設(shè)計(jì)？當(dāng)你需要考慮以下事情時(shí)：在時(shí)間上，金錢上，不同瀏覽器的支持，性能，內(nèi)容的呈現(xiàn)，網(wǎng)站等等去跟移動應(yīng)用相對比時(shí)，自然而然就需要采用自適應(yīng)網(wǎng)頁的設(shè)計(jì)。

現(xiàn)在的互聯(lián)網(wǎng)已經(jīng)發(fā)展到了移動網(wǎng)絡(luò)5G的時(shí)代，我們接觸互聯(lián)網(wǎng)的方式已經(jīng)開始呈現(xiàn)出多元化方向發(fā)展，屏幕大小的展示有很大的不確定因素，假設(shè)現(xiàn)在的個(gè)人和企業(yè)等方面的網(wǎng)站要求每個(gè)顯示屏幕都去制作設(shè)計(jì)一個(gè)網(wǎng)站，很明顯就會會加大設(shè)計(jì)和管理網(wǎng)站的成本，同時(shí)還會涉及到未來的運(yùn)營方面的不便和耗費(fèi)大量的人力財(cái)力的成本來支撐其運(yùn)營。
自適應(yīng)網(wǎng)站的設(shè)計(jì)的出現(xiàn)使的設(shè)計(jì)師在設(shè)計(jì)一個(gè)網(wǎng)站的時(shí)候，可以方便快捷的市網(wǎng)頁適應(yīng)不同的終端系統(tǒng)，應(yīng)用到不同的網(wǎng)絡(luò)載體上去，它具有非常好的的便捷性，同時(shí)也有利于減少企業(yè)設(shè)計(jì)開發(fā)網(wǎng)站的成本等。

老式的網(wǎng)站是固定的死網(wǎng)頁的寬度或者高度，在不同的客戶端所展現(xiàn)的頁面效果都是一樣的。所謂自適應(yīng)網(wǎng)站設(shè)計(jì)是指在網(wǎng)頁前端展示的內(nèi)容是活的，即筆記本電腦、臺式電腦、移動設(shè)備等不同的設(shè)備所看到的內(nèi)容是不一樣的，有了這種技術(shù)，網(wǎng)頁就可以適應(yīng)任何終端，在任何終端都能展示出最好的效果。
對目前的自適應(yīng)網(wǎng)頁設(shè)計(jì)的發(fā)展趨勢來講，無論是放在市場的角度，還是建設(shè)網(wǎng)站的角度，自適應(yīng)網(wǎng)頁將會取代傳統(tǒng)建設(shè)網(wǎng)站的地位?；ヂ?lián)網(wǎng)日新月異，隨著更多的互聯(lián)網(wǎng)技術(shù)的誕生，會有更強(qiáng)大的技術(shù)出現(xiàn)。

2.2自適應(yīng)與響應(yīng)式區(qū)別

響應(yīng)式布局的網(wǎng)頁可放在不同適配分辨率下的呈現(xiàn)，這一概念在2010年5月由Ethan Marcotte提出的，簡單來說就是建立一個(gè)網(wǎng)頁，通過CSSMedia Queries，Content－Based Breakpoint（基于內(nèi)容的斷點(diǎn)）等技術(shù)來改變網(wǎng)頁的大小以適應(yīng)不同分辨率的屏幕。

自適應(yīng)布局依據(jù)不同適配分辨率而選擇不同的頁面，為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。

目前AWD網(wǎng)頁主要針對以下幾種分辨率（320，480，760，960，1200，1600）。制作和設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要根據(jù)需求來判斷什么樣的網(wǎng)站適合使用自適應(yīng)布局（固定斷點(diǎn)），什么樣的網(wǎng)站適合響應(yīng)式布局（流體網(wǎng)格）。響應(yīng)式布局在任何情況下都比自適應(yīng)布局好一些，但在某些情況下自適應(yīng)布局更切合實(shí)際。

自適應(yīng)網(wǎng)頁設(shè)計(jì)的優(yōu)勢就是適合固定斷點(diǎn)的網(wǎng)站。在網(wǎng)頁的實(shí)施上面代價(jià)成本更低，測試也比較容易。
自適應(yīng)布局可以讓設(shè)計(jì)更加容易操作控制，因?yàn)樗恍枰紤]幾種狀態(tài)就行了。
自適應(yīng)本身是去解決怎樣才能在不同大小的移動設(shè)備或者其他設(shè)備上表現(xiàn)出相同的網(wǎng)頁，寬度一般在600像素以下和在1000像素以上的時(shí)候，前者說明是手機(jī)小屏幕后者則是pc端。相同的內(nèi)容，在大小不一的屏幕上，都表現(xiàn)出理想滿意的效果，不是一件易事。

總結(jié)：
響應(yīng)式網(wǎng)頁設(shè)計(jì)是一種能使網(wǎng)頁能夠在不同窗口大小或不同屏幕大小的設(shè)備上都良好展示的網(wǎng)頁設(shè)計(jì)技術(shù)。
自適應(yīng)網(wǎng)頁設(shè)計(jì)是一種后端檢測技術(shù)，它可根據(jù)用戶代理選擇布局和大小合適的頁面。
自適應(yīng)設(shè)計(jì)會根據(jù)屏幕尺寸和分辨率，為不同設(shè)備提供不同版本的網(wǎng)站（網(wǎng)頁）。

2.3PHP與H5
PHP以服務(wù)端開發(fā)為主，H5是前端開發(fā)。服務(wù)端主要與服務(wù)器（CPU、內(nèi)存、磁盤、網(wǎng)絡(luò)）和數(shù)據(jù)庫打交道，性能是重點(diǎn)。服務(wù)端一般不直接與用戶打交道，而是與更接近用戶的應(yīng)用及前端交換數(shù)據(jù)。前端主要與人打交道，重點(diǎn)是開發(fā)出用戶體驗(yàn)良好的應(yīng)用和網(wǎng)站。
H5不只是HTML、CSS，而是以JS為主的前端和Web App開發(fā)最新技術(shù)的統(tǒng)稱。^[2]
H5，是HTML5 的簡稱。 它實(shí)現(xiàn)的功能與Flash 類似（用于實(shí)現(xiàn)動畫和各種酷炫的人機(jī)交互界面等），但是比Flash 具有更強(qiáng)的兼容性，可擴(kuò)展性，穩(wěn)定性以及安全性，因?yàn)樵摷夹g(shù)是HTML 的延展。HTML5并不是一項(xiàng)技術(shù)，而是一個(gè)標(biāo)準(zhǔn)。
H5雖是一個(gè)網(wǎng)頁的形式，但主要是靠微信掃碼、公眾號、微信群和朋友圈等渠道傳播，H5與微信的捆綁十分緊密。

參考

1. ^php判斷是否為移動手機(jī)端?https://www.php.cn/php-ask-478885.html
2. ^基于PHP技術(shù)的多客戶端自適應(yīng)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)?https://www.cnfg.cc/article/201711/1381-1.html