干貨丨讓 HTML5 來為你華麗的定位

說，華麗的HTML5浪潮已經打濕了眾多網站設計師，而且還將繼續在國內刮起龍卷風。

首先，HTML5的出現會使得手機中的原生態APP減少。因為HTML5能夠產生一種假的APP，使得用戶無需下載安裝APP，而是通過利用手機瀏覽器運行。

第二，HTML5的出現大大節省了人們的開發成本。因為它通吃PC、Mac、iPhone、iPad、Android、Windows Phone等跨語言平臺。程序員們再也不必為不同款的手機做不同的APP了。

第三，HTML5的出現使得手機里可以不用再有Flash了。因為HTML5就有這種魔力使得我們觀看多媒體時不必安裝Flash等第三方插件。

第四，由于第三方插件的減少，手機得到了減肥瘦身，那么手機電量自然也會相對持久一些。

第五，HTML5使得手機定位服務更便捷，因為它實現了基于地理位置的功能，想定位，直接點擊“附近”就能輕松搞定。

第六，HTML5使得設計師們可以設計出更加美觀、更加炫酷的網頁，創造出更加有強大視覺效果的界面。

看到這里，你對HTML5動心了嗎？下面為大家介紹一個HTML5的酷炫功能——定位系統！

Geolocation

HTML5 的 geolocation 是一個令人興奮的 API，通過這套 API，Javascript 代碼就能夠訪問到用戶的當前位置。當然，訪問之前必須得到用戶的明確認可，即同意在頁面共享位置。如果頁面嘗試訪問地理位置信息，瀏覽器就會顯示一個對話框，請求用戶許可共享其地理位置信息，比如這樣：

用戶同意（允許）之后，Geolocation 的 api 就能起作用了。

getCurrentPosition 方法

Geolocation API 在瀏覽器中的實現是 navigator.geolocation 對象，這個對象包含 3 個方法。第一個方法是 getCurrentPosition，調用這個方法就會觸發請求用戶共享地理定位信息的對話框。這個方法接收 3 個參數：成功回調函數，可選的失敗回調函數和可選的選項對象。

其中，成功回調函數會接收到一個 Position 對象參數，該對象有兩個屬性：coords 和 timestamp。而 coords 對象中將包含下列與位置相關的信息。

latitude：以十進制度數表示的維度
longtitude：以十進制度數表示的經度
accuracy：經緯度坐標的精度，以米為單位

有些瀏覽器可能會在 coords 對象中提供如下屬性。

altitude：以米為單位的海拔高度，如果沒有相關數據則值為
altitudeAccuracy：海拔高度的精度，以米為單位，數值越大越不精確
heading：指南針的方向，0°表示正北，值為 NaN 表示沒有檢測到數據
speed：速度，即每秒移動多少米，如果沒有相關數據則值為

說了這么多，我們來簡單應用下，寫一段代碼獲取當前的經緯度，然后輸出：

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);
}

代碼很簡單，如果請求成功了就執行 geo_success 函數，打印經緯度，如果失敗了，輸出一些信息（失敗回調）。

getCurrentPosition 的第二個參數，即失敗回調函數，在被調用的時候也會接收到一個參數。這個參數是一個對象，包含兩個屬性：message 和 code。其中，message 屬性中保存著給人看的文本消息，解釋為什么會出錯，而 code 屬性中保存著一個數值，表示錯誤的類型：用戶拒絕共享（1），位置無效（2）或者超時（3）。實際開發中，大多數 Web 應用只會講錯誤消息保存到日志文件中，而不一定會修改用戶界面。

我們在 PC 端的 chrome 瀏覽器中執行這段代碼，結果是令人遺憾的：

掐指一算，估計是被墻了... 事實上，以 Chrome 瀏覽器為例，如果您允許 Chrome 瀏覽器與網站共享您的位置，Chrome 瀏覽器會向 Google 位置服務（此環節被墻）發送本地網絡信息，估計您所在的位置。然后，瀏覽器會與請求使用您位置的網站共享您的位置。

接著在 Android 機上測試了下，沒被墻，畢竟谷歌是 Android 的親爹啊。打印出來的信息如下：

31.188199 121.632919

當然只是知道經緯度或許不太那么直觀，如果能把位置顯示在地圖上那就直觀多了！這里我用了高德地圖的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=您申請的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',
{ // 設置中心點 center: [position.coords.longitude, position.coords.latitude], // 設置縮放級別 zoom: 13 });
var marker = new AMap.Marker
({ //復雜圖標 icon: new AMap.Icon({ //圖標大小 size: new AMap.Size(28, 37), //大圖地址 image: "http://webapi.amap.com/images/custom_a_j.png",
imageOffset: new AMap.Pixel(-28, 0) }), //在地圖上添加點 position: [position.coords.longitude, position.coords.latitude] }); marker.setMap(map); }
function geo_error(msg) { console.log(msg.code, msg.message); } </script> </body> </html>

在手機上打開后：

我的天哪！實在是太準了！如果我把代碼里的 zoom 參數再加大點，能精確到小區了...當然，這并不奇怪，因為這本來就是高德地圖百度地圖定位的一部分嘛。

事實上，getCurrentPosition 還有第三個參數，該參數是一個選項對象，用于設定信息的類型。可以設置的選項有三個：enableHighAccuracy 是一個布爾值，表示必須盡可能使用最精確的位置信息；timeout 是以毫秒數表示的等待位置信息的最長時間；maximumAge 表示上一次取得的坐標信息的有效時間，以毫秒表示，如果時間到則重新取得新坐標信息。

除非確實需要非常精確的信息，否則建議保持 enableHighAccuracy 的 false 值（默認值）。將這個選項設置為 true 需要更長的時候，而且在移動設備上更耗電。類似的，如果不需要頻繁更新用戶的位置信息，那么可以將 maximumAge 設置為 Infinity，從而始終都使用上一次的坐標信息。

navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
// 指示瀏覽器獲取高精度的位置，默認為false
enableHighAcuracy: true,
// 指定獲取地理位置的超時時間，默認不限時，單位為毫秒
timeout: 5000,
// 最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。
maximumAge: 3000
});

watchPosition 方法

如果要跟蹤用戶的位置，那么可以使用 watchPosition 方法。這個方法的使用和 getCurrentPosition 完全相同。實際上 watchPosition 與定時調用 getCurrentPosition 能得到相同效果。在第一次調用 watchPosition 方法后，會取得當前位置，執行成功回調或者錯誤回調。然后，watchPosition 就地等待系統發出位置已改變的信號。

調用 watchPosition 會返回一個數值標識符，用于跟蹤監控的操作。基于這個返回值可以取消監控操作，只要將其傳遞給 clearWatch 方法即可（與使用 setTimeout() 和 clearTimeout() 類似），例如：

var watchId = navigator.geolocation.watchPosition(geo_success, geo_error);
clearWatch(watchId);

Geolocation 定位原理

Geolocation API 的數據來源可能是 GPS、IP 地址、RFID、WiFi、藍牙 MAC 地址、GSM/CDMA 卡 ID 等。因為 Geolocation API 是運行在你本地設備上的。所以，在使用 VPN 或代理的情況下，Geo API 仍能獲得你準確的 IP 地址信息（除非因為某些因素瀏覽器獲取不到這些信息）。

在HTML5的實現中，手機等移動設備當然優先使用GPS定位，而筆記本和部分平板，最準的定位是WIFI，至于網線上網的臺式機，一般就只能使用IP來定位了，這個準確度最低。

、利用meta標簽

Meta標簽主要用來描述一個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利于搜索引擎。

解釋：Viewport指用戶網頁的可視區域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

以上標簽只支持一種尺寸，正確的做法是用js動態生成下面標簽，前提是要先獲取屏幕尺寸。

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中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復雜的頁面實現很困難。

3、使用CSS3單位rem

在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設寬度為W，一個div在寬度為640px的設計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會在頭部加上這個JS代碼：

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、媒體查詢

媒體查詢正是為解決網頁適應手機屏幕。媒體查詢的功能就是為不同的“媒體”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應頁面需要比較好的編程基礎和技術覺悟，一般的小白，不建議大家為了做自適應網頁專門學習HTML5、CSS3和JS，畢竟這并非一朝一夕就能學會的。如果技術小白想做自適應網頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎，全程拖拽，一樣能做出讓人驚艷的自適應網站。現在還有免費建站活動，無論外行內行，大家可以注冊體驗一下。

零基礎免費做HTML5自適應網站：http://www.iisp.com/design/free-site.php?s=yuqiuping

級手機網站建設流程與移動端體驗優化

在當今移動設備使用普及的時代，高級手機網站建設不僅需要關注技術創新，還要優化用戶體驗，以下是相關的詳細解析：

1. 高級手機網站建設流程

a. 需求分析與策劃

任何網站建設的步都是明確需求和目標：

目標群體分析：確定主要的目標用戶群體，包括其設備偏好、行為習慣和需求。

功能需求確定：確定網站需要提供的功能和服務，如購物車、搜索功能、用戶登錄等。

b. 網站架構設計

i. 信息架構設計：設計清晰的信息結構，確保用戶能夠輕松找到所需信息。

ii. 頁面布局設計：設計響應式布局，確保在各種屏幕尺寸下均能提供良好的視覺和操作體驗。

c. UIUX 設計

i. 用戶界面設計（UI）：使用現代化設計語言和品牌元素，確保網站與品牌形象一致。

ii. 用戶體驗設計（UX）：確保頁面加載速度快，操作流程簡單直觀，提升用戶滿意度和留存率。

d. 網站開發與測試

i. 前端開發：使用HTML5、CSS3、JavaScript等技術開發響應式網頁，確保跨平臺和跨瀏覽器兼容性。

ii. 后端開發：開發網站所需的服務器端功能和數據庫管理系統，確保數據安全和網站穩定性。

e. 上線與維護

i. 網站上線：將開發完成的網站部署到生產服務器，確保正常運行。

ii. 網站維護：定期更新內容、優化性能，解決bug和安全漏洞，保持網站的穩定性和安全性。

2. 移動端體驗優化

a. 響應式設計

確保網站在各種移動設備上提供一致的用戶體驗：

流動布局：根據設備屏幕大小自動調整頁面布局，確保內容清晰可見。

觸摸友好：設計大而適當的點擊目標，減少誤觸發，提升用戶操作的精準度。

b. 頁面加載速度優化

移動設備的用戶更加注重頁面加載速度：

圖片和資源優化：壓縮圖片和靜態資源，減少HTTP請求，加速頁面加載時間。

CDN 加速：使用內容分發網絡（CDN），將內容緩存到離用戶近的服務器，提升加載速度。

c. 手勢操作和交互設計

利用移動設備的特性設計更直觀的交互體驗：

手勢操作：如滑動、捏合等手勢，優化用戶與網站的互動方式。

本地功能集成：如地理位置、相機等本地功能的集成，增強網站的實用性和個性化體驗。

3. 技術創新整合

a. PWA（Progressive Web App）應用

結合PWA技術，將網站打造成具備應用般體驗的網頁：

脫機訪問能力：允許用戶在無網絡連接時繼續訪問某些內容。

推送通知：允許網站向用戶發送推送通知，增強用戶參與度和留存率。

b. AI 和機器學習應用

利用AI技術優化用戶體驗和個性化推薦：

智能搜索和推薦：基于用戶行為和偏好提供個性化的搜索結果和內容推薦。

客戶服務自動化：使用聊天機器人和自動回復系統提供實時客戶支持。

c. VRAR 技術整合

探索虛擬現實（VR）和增強現實（AR）技術在網站體驗中的應用：

產品展示和體驗：使用VRAR技術提供更真實的產品展示和互動體驗。

虛擬導覽和實地體驗：提供虛擬導覽和實地體驗功能，增強用戶的參與感和體驗感。

結論

通過以上高級手機網站建設流程、移動端體驗優化以及技術創新整合的綜合考慮，可以打造出既美觀、功能豐富又具有優異用戶體驗的網站。關鍵在于不斷迭代和優化，保持與技術發展同步，以滿足移動用戶日益增長的需求和期望，從而提升品牌形象和用戶忠誠度。

轉載注明 https://www.lika123.com/

在線咨詢

上一篇：前端HTML篇-03HTML之head的基本作用
下一篇：HTML的文字樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

干貨丨讓 HTML5 來為你華麗的定位

您的項目需求