整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
說(shuō)，華麗的HTML5浪潮已經(jīng)打濕了眾多網(wǎng)站設(shè)計(jì)師，而且還將繼續(xù)在國(guó)內(nèi)刮起龍卷風(fēng)。
首先，HTML5的出現(xiàn)會(huì)使得手機(jī)中的原生態(tài)APP減少。因?yàn)镠TML5能夠產(chǎn)生一種假的APP，使得用戶(hù)無(wú)需下載安裝APP，而是通過(guò)利用手機(jī)瀏覽器運(yùn)行。
第二，HTML5的出現(xiàn)大大節(jié)省了人們的開(kāi)發(fā)成本。因?yàn)樗ǔ訮C、Mac、iPhone、iPad、Android、Windows Phone等跨語(yǔ)言平臺(tái)。程序員們?cè)僖膊槐貫椴煌畹氖謾C(jī)做不同的APP了。
第三，HTML5的出現(xiàn)使得手機(jī)里可以不用再有Flash了。因?yàn)镠TML5就有這種魔力使得我們觀看多媒體時(shí)不必安裝Flash等第三方插件。
第四，由于第三方插件的減少，手機(jī)得到了減肥瘦身，那么手機(jī)電量自然也會(huì)相對(duì)持久一些。
第五，HTML5使得手機(jī)定位服務(wù)更便捷，因?yàn)樗鼘?shí)現(xiàn)了基于地理位置的功能，想定位，直接點(diǎn)擊“附近”就能輕松搞定。
第六，HTML5使得設(shè)計(jì)師們可以設(shè)計(jì)出更加美觀、更加炫酷的網(wǎng)頁(yè)，創(chuàng)造出更加有強(qiáng)大視覺(jué)效果的界面。
看到這里，你對(duì)HTML5動(dòng)心了嗎？下面為大家介紹一個(gè)HTML5的酷炫功能——定位系統(tǒng)！
Geolocation
HTML5 的 geolocation 是一個(gè)令人興奮的 API，通過(guò)這套 API，Javascript 代碼就能夠訪(fǎng)問(wèn)到用戶(hù)的當(dāng)前位置。當(dāng)然，訪(fǎng)問(wèn)之前必須得到用戶(hù)的明確認(rèn)可，即同意在頁(yè)面共享位置。如果頁(yè)面嘗試訪(fǎng)問(wèn)地理位置信息，瀏覽器就會(huì)顯示一個(gè)對(duì)話(huà) 框，請(qǐng)求用戶(hù)許可共享其地理位置信息，比如這樣：
用戶(hù)同意（允許）之后，Geolocation 的 api 就能起作用了。
getCurrentPosition 方法
Geolocation API 在瀏覽器中的實(shí)現(xiàn)是 navigator.geolocation 對(duì)象，這個(gè)對(duì)象包含 3 個(gè)方法。第一個(gè)方法是 getCurrentPosition，調(diào)用這個(gè)方法就會(huì)觸發(fā)請(qǐng)求用戶(hù)共享地理定位信息的對(duì)話(huà)框。這個(gè)方法接收 3 個(gè)參數(shù)：成功回調(diào)函數(shù)，可選的失敗回調(diào)函數(shù)和可選的選項(xiàng)對(duì)象。
其中，成功回調(diào)函數(shù)會(huì)接收到一個(gè) Position 對(duì)象參數(shù)，該對(duì)象有兩個(gè)屬性：coords 和 timestamp。而 coords 對(duì)象中將包含下列與位置相關(guān)的信息。
latitude：以十進(jìn)制度數(shù)表示的維度
longtitude：以十進(jìn)制度數(shù)表示的經(jīng)度
accuracy：經(jīng)緯度坐標(biāo)的精度，以米為單位
有些瀏覽器可能會(huì)在 coords 對(duì)象中提供如下屬性。
altitude：以米為單位的海拔高度，如果沒(méi)有相關(guān)數(shù)據(jù)則值為
altitudeAccuracy：海拔高度的精度，以米為單位，數(shù)值越大越不精確
heading：指南針的方向，0°表示正北，值為 NaN 表示沒(méi)有檢測(cè)到數(shù)據(jù)
speed：速度，即每秒移動(dòng)多少米，如果沒(méi)有相關(guān)數(shù)據(jù)則值為
說(shuō)了這么多，我們來(lái)簡(jiǎn)單應(yīng)用下，寫(xiě)一段代碼獲取當(dāng)前的經(jīng)緯度，然后輸出：
navigator.geolocation.getCurrentPosition(geo_success, geo_error);
function geo_success(position) {
console.log(position.coords.latitude, position.coords.longitude);
}
function geo_error(msg) {
console.log(msg.code, msg.message);
}
代碼很簡(jiǎn)單，如果請(qǐng)求成功了就執(zhí)行 geo_success 函數(shù)，打印經(jīng)緯度，如果失敗了，輸出一些信息（失敗回調(diào)）。
getCurrentPosition 的第二個(gè)參數(shù)，即失敗回調(diào)函數(shù)，在被調(diào)用的時(shí)候也會(huì)接收到一個(gè)參數(shù)。這個(gè)參數(shù)是一個(gè)對(duì)象，包含兩個(gè)屬性：message 和 code。 其中，message 屬性中保存著給人看的文本消息，解釋為什么會(huì)出錯(cuò)，而 code 屬性中保存著一個(gè)數(shù)值，表示錯(cuò)誤的類(lèi)型：用戶(hù)拒絕共享（1），位置無(wú)效（2）或者超時(shí)（3）。實(shí)際開(kāi)發(fā)中，大多數(shù) Web 應(yīng)用只會(huì)講錯(cuò)誤消息保存到日志文件中，而不一定會(huì)修改用戶(hù)界面。
我們?cè)?PC 端的 chrome 瀏覽器中執(zhí)行這段代碼，結(jié)果是令人遺憾的：
掐指一算，估計(jì)是被墻了... 事實(shí)上，以 Chrome 瀏覽器為例，如果您允許 Chrome 瀏覽器與網(wǎng)站共享您的位置，Chrome 瀏覽器會(huì)向 Google 位置服務(wù)（此環(huán)節(jié)被墻）發(fā)送本地網(wǎng)絡(luò)信息，估計(jì)您所在的位置。然后，瀏覽器會(huì)與請(qǐng)求使用您位置的網(wǎng)站共享您的位置。
接著在 Android 機(jī)上測(cè)試了下，沒(méi)被墻，畢竟谷歌是 Android 的親爹啊。打印出來(lái)的信息如下：
31.188199 121.632919
當(dāng)然只是知道經(jīng)緯度或許不太那么直觀，如果能把位置顯示在地圖上那就直觀多了！這里我用了高德地圖的API（猛戳這里看效果）：
<!doctype html>
<html>
<head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地圖顯示</title> <link rel="stylesheet" />
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script> </head> <body> <div id="mapContainer"></div>
<script> navigator.geolocation.getCurrentPosition(geo_success, geo_error); function geo_success(position)
{ var map = new AMap.Map('mapContainer',
{ // 設(shè)置中心點(diǎn) center: [position.coords.longitude, position.coords.latitude], // 設(shè)置縮放級(jí)別 zoom: 13 });
var marker = new AMap.Marker
({ //復(fù)雜圖標(biāo) icon: new AMap.Icon({ //圖標(biāo)大小 size: new AMap.Size(28, 37), //大圖地址 image: "http://webapi.amap.com/images/custom_a_j.png",
imageOffset: new AMap.Pixel(-28, 0) }), //在地圖上添加點(diǎn) position: [position.coords.longitude, position.coords.latitude] }); marker.setMap(map); }
function geo_error(msg) { console.log(msg.code, msg.message); } </script> </body> </html>
在手機(jī)上打開(kāi)后：
我的天哪！實(shí)在是太準(zhǔn)了！如果我把代碼里的 zoom 參數(shù)再加大點(diǎn)，能精確到小區(qū)了...當(dāng)然，這并不奇怪，因?yàn)檫@本來(lái)就是高德地圖百度地圖定位的一部分嘛。
事實(shí)上，getCurrentPosition 還有第三個(gè)參數(shù)，該參數(shù)是一個(gè)選項(xiàng)對(duì)象，用于設(shè)定信息的類(lèi)型。可以設(shè)置的選項(xiàng)有三個(gè)：enableHighAccuracy 是一個(gè)布爾值，表示必須盡可能使用最精確的位置信息；timeout 是以毫秒數(shù)表示的等待位置信息的最長(zhǎng)時(shí)間；maximumAge 表示上一次取得的坐標(biāo)信息的有效時(shí)間，以毫秒表示，如果時(shí)間到則重新取得新坐標(biāo)信息。
除非確實(shí)需要非常精確的信息，否則建議保持 enableHighAccuracy 的 false 值（默認(rèn)值）。將這個(gè)選項(xiàng)設(shè)置為 true 需要更長(zhǎng)的時(shí)候，而且在移動(dòng)設(shè)備上更耗電。類(lèi)似的，如果不需要頻繁更新用戶(hù)的位置信息，那么可以將 maximumAge 設(shè)置為 Infinity，從而始終都使用上一次的坐標(biāo)信息。
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
// 指示瀏覽器獲取高精度的位置，默認(rèn)為false
enableHighAcuracy: true,
// 指定獲取地理位置的超時(shí)時(shí)間，默認(rèn)不限時(shí)，單位為毫秒
timeout: 5000,
// 最長(zhǎng)有效期，在重復(fù)獲取地理位置時(shí)，此參數(shù)指定多久再次獲取位置。
maximumAge: 3000
});
watchPosition 方法
如果要跟蹤用戶(hù)的位置，那么可以使用 watchPosition 方法。這個(gè)方法的使用和 getCurrentPosition 完全相同。實(shí)際上 watchPosition 與定時(shí)調(diào)用 getCurrentPosition 能得到相同效果。在第一次調(diào)用 watchPosition 方法后，會(huì)取得當(dāng)前位置，執(zhí)行成功回調(diào)或者錯(cuò)誤回調(diào)。然后，watchPosition 就地等待系統(tǒng)發(fā)出位置已改變的信號(hào)。
調(diào)用 watchPosition 會(huì)返回一個(gè)數(shù)值標(biāo)識(shí)符，用于跟蹤監(jiān)控的操作。基于這個(gè)返回值可以取消監(jiān)控操作，只要將其傳遞給 clearWatch 方法即可（與使用 setTimeout() 和 clearTimeout() 類(lèi)似），例如：
var watchId = navigator.geolocation.watchPosition(geo_success, geo_error);
clearWatch(watchId);
Geolocation 定位原理
Geolocation API 的數(shù)據(jù)來(lái)源可能是 GPS、IP 地址、RFID、WiFi、藍(lán)牙 MAC 地址、GSM/CDMA 卡 ID 等。因?yàn)?Geolocation API 是運(yùn)行在你本地設(shè)備上的。所以，在使用 VPN 或代理的情況下，Geo API 仍能獲得你準(zhǔn)確的 IP 地址信息（除非因?yàn)槟承┮蛩貫g覽器獲取不到這些信息）。
在HTML5的實(shí)現(xiàn)中，手機(jī)等移動(dòng)設(shè)備當(dāng)然優(yōu)先使用GPS定位，而筆記本和部分平板，最準(zhǔn)的定位是WIFI，至于網(wǎng)線(xiàn)上網(wǎng)的臺(tái)式機(jī)，一般就只能使用IP來(lái)定位了，這個(gè)準(zhǔn)確度最低。
、 利用meta標(biāo)簽
Meta標(biāo)簽主要用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，如作者、日期時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁(yè)利于搜索引擎。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋?zhuān)篤iewport指用戶(hù)網(wǎng)頁(yè)的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁(yè)面寬度初始比例為1，最小比例為1，最大比例為1，用戶(hù)不可擴(kuò)展，頁(yè)面不可縮放。
以上標(biāo)簽只支持一種尺寸，正確的做法是用js動(dòng)態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);
if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }
else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }
else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }
</script>
2、百分比法
CSS中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。
3、 使用CSS3單位rem
在頁(yè)面載入開(kāi)始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？
計(jì)算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size，計(jì)算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。
所以會(huì)在頭部加上這個(gè)JS代碼：
<script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
</script>
4、 媒體查詢(xún)
媒體查詢(xún)正是為解決網(wǎng)頁(yè)適應(yīng)手機(jī)屏幕。媒體查詢(xún)的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁(yè)面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁(yè)面中的class="icon"的元素設(shè)置樣式，可以這樣寫(xiě)，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。
以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁(yè)面需要比較好的編程基礎(chǔ)和技術(shù)覺(jué)悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁(yè)專(zhuān)門(mén)學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會(huì)的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁(yè)，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站。現(xiàn)在還有免費(fèi)建站活動(dòng)，無(wú)論外行內(nèi)行，大家可以注冊(cè)體驗(yàn)一下。
零基礎(chǔ)免費(fèi)做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping
級(jí)手機(jī)網(wǎng)站建設(shè)流程與移動(dòng)端體驗(yàn)優(yōu)化
在當(dāng)今移動(dòng)設(shè)備使用普及的時(shí)代，高級(jí)手機(jī)網(wǎng)站建設(shè)不僅需要關(guān)注技術(shù)創(chuàng)新，還要優(yōu)化用戶(hù)體驗(yàn)，以下是相關(guān)的詳細(xì)解析：
1. 高級(jí)手機(jī)網(wǎng)站建設(shè)流程
a. 需求分析與策劃
任何網(wǎng)站建設(shè)的步都是明確需求和目標(biāo)：
目標(biāo)群體分析： 確定主要的目標(biāo)用戶(hù)群體，包括其設(shè)備偏好、行為習(xí)慣和需求。
功能需求確定： 確定網(wǎng)站需要提供的功能和服務(wù)，如購(gòu)物車(chē)、搜索功能、用戶(hù)登錄等。
b. 網(wǎng)站架構(gòu)設(shè)計(jì)
i. 信息架構(gòu)設(shè)計(jì)： 設(shè)計(jì)清晰的信息結(jié)構(gòu)，確保用戶(hù)能夠輕松找到所需信息。
ii. 頁(yè)面布局設(shè)計(jì)： 設(shè)計(jì)響應(yīng)式布局，確保在各種屏幕尺寸下均能提供良好的視覺(jué)和操作體驗(yàn)。
c. UIUX 設(shè)計(jì)
i. 用戶(hù)界面設(shè)計(jì)（UI）： 使用現(xiàn)代化設(shè)計(jì)語(yǔ)言和品牌元素，確保網(wǎng)站與品牌形象一致。
ii. 用戶(hù)體驗(yàn)設(shè)計(jì)（UX）： 確保頁(yè)面加載速度快，操作流程簡(jiǎn)單直觀，提升用戶(hù)滿(mǎn)意度和留存率。
d. 網(wǎng)站開(kāi)發(fā)與測(cè)試
i. 前端開(kāi)發(fā)： 使用HTML5、CSS3、JavaScript等技術(shù)開(kāi)發(fā)響應(yīng)式網(wǎng)頁(yè)，確保跨平臺(tái)和跨瀏覽器兼容性。
ii. 后端開(kāi)發(fā)： 開(kāi)發(fā)網(wǎng)站所需的服務(wù)器端功能和數(shù)據(jù)庫(kù)管理系統(tǒng)，確保數(shù)據(jù)安全和網(wǎng)站穩(wěn)定性。
e. 上線(xiàn)與維護(hù)
i. 網(wǎng)站上線(xiàn)： 將開(kāi)發(fā)完成的網(wǎng)站部署到生產(chǎn)服務(wù)器，確保正常運(yùn)行。
ii. 網(wǎng)站維護(hù)： 定期更新內(nèi)容、優(yōu)化性能，解決bug和安全漏洞，保持網(wǎng)站的穩(wěn)定性和安全性。
2. 移動(dòng)端體驗(yàn)優(yōu)化
a. 響應(yīng)式設(shè)計(jì)
確保網(wǎng)站在各種移動(dòng)設(shè)備上提供一致的用戶(hù)體驗(yàn)：
流動(dòng)布局： 根據(jù)設(shè)備屏幕大小自動(dòng)調(diào)整頁(yè)面布局，確保內(nèi)容清晰可見(jiàn)。
觸摸友好： 設(shè)計(jì)大而適當(dāng)?shù)狞c(diǎn)擊目標(biāo)，減少誤觸發(fā)，提升用戶(hù)操作的精準(zhǔn)度。
b. 頁(yè)面加載速度優(yōu)化
移動(dòng)設(shè)備的用戶(hù)更加注重頁(yè)面加載速度：
圖片和資源優(yōu)化： 壓縮圖片和靜態(tài)資源，減少HTTP請(qǐng)求，加速頁(yè)面加載時(shí)間。
CDN 加速： 使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN），將內(nèi)容緩存到離用戶(hù)近的服務(wù)器，提升加載速度。
c. 手勢(shì)操作和交互設(shè)計(jì)
利用移動(dòng)設(shè)備的特性設(shè)計(jì)更直觀的交互體驗(yàn)：
手勢(shì)操作： 如滑動(dòng)、捏合等手勢(shì)，優(yōu)化用戶(hù)與網(wǎng)站的互動(dòng)方式。
本地功能集成： 如地理位置、相機(jī)等本地功能的集成，增強(qiáng)網(wǎng)站的實(shí)用性和個(gè)性化體驗(yàn)。
3. 技術(shù)創(chuàng)新整合
a. PWA（Progressive Web App）應(yīng)用
結(jié)合PWA技術(shù)，將網(wǎng)站打造成具備應(yīng)用般體驗(yàn)的網(wǎng)頁(yè)：
脫機(jī)訪(fǎng)問(wèn)能力： 允許用戶(hù)在無(wú)網(wǎng)絡(luò)連接時(shí)繼續(xù)訪(fǎng)問(wèn)某些內(nèi)容。
推送通知： 允許網(wǎng)站向用戶(hù)發(fā)送推送通知，增強(qiáng)用戶(hù)參與度和留存率。
b. AI 和機(jī)器學(xué)習(xí)應(yīng)用
利用AI技術(shù)優(yōu)化用戶(hù)體驗(yàn)和個(gè)性化推薦：
智能搜索和推薦： 基于用戶(hù)行為和偏好提供個(gè)性化的搜索結(jié)果和內(nèi)容推薦。
客戶(hù)服務(wù)自動(dòng)化： 使用聊天機(jī)器人和自動(dòng)回復(fù)系統(tǒng)提供實(shí)時(shí)客戶(hù)支持。
c. VRAR 技術(shù)整合
探索虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）技術(shù)在網(wǎng)站體驗(yàn)中的應(yīng)用：
產(chǎn)品展示和體驗(yàn)： 使用VRAR技術(shù)提供更真實(shí)的產(chǎn)品展示和互動(dòng)體驗(yàn)。
虛擬導(dǎo)覽和實(shí)地體驗(yàn)： 提供虛擬導(dǎo)覽和實(shí)地體驗(yàn)功能，增強(qiáng)用戶(hù)的參與感和體驗(yàn)感。
結(jié)論
通過(guò)以上高級(jí)手機(jī)網(wǎng)站建設(shè)流程、移動(dòng)端體驗(yàn)優(yōu)化以及技術(shù)創(chuàng)新整合的綜合考慮，可以打造出既美觀、功能豐富又具有優(yōu)異用戶(hù)體驗(yàn)的網(wǎng)站。關(guān)鍵在于不斷迭代和優(yōu)化，保持與技術(shù)發(fā)展同步，以滿(mǎn)足移動(dòng)用戶(hù)日益增長(zhǎng)的需求和期望，從而提升品牌形象和用戶(hù)忠誠(chéng)度。
轉(zhuǎn)載注明 https://www.lika123.com/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
