干货丨让 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" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
<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 来为你华丽的定位

您的项目需求