手机端h5网页适配的js，以及常用的一些meta

JavaScript06

手机端h5网页适配的js，以及常用的一些meta,第1张

手机端网页适配，一般设计稿宽750，根据设计稿适配。

页面头部一般会加这些meta

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="wap-font-scale" content="no">

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 忽略页面中的数字识别为电话号码,email识别 -->

<meta name="format-detection"content="telephone=no, email=no" />

<!-- 启用360浏览器的极速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式（这个适合加在PC） -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--  针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓    -->

<meta name="HandheldFriendly" content="true">

<!-- uc强制竖屏 -->

<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->

<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->

<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->

<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->

<meta name="browsermode" content="application">

<script type="text/javascript">

      (function(d,c){

        var e=d.documentElement,

          a="orientationchange" in window?"orientationchange":"resize",

          b=function(){

            var f=e.clientWidth

            if(!f){return}

            if(f>=750){

                e.style.fontSize="100px"

            }else{

                e.style.fontSize=100*(f/750)+"px"

            }

          }

          if(!d.addEventListener){return}

          b()

          c.addEventListener(a,b,false)

          d.addEventListener("DOMContentLoaded",b,false)

        }

      )(document,window)

    </script>

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码如下：

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

name: '北京市',

date: curDateTime()//获取当前时间方法

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

if (successFunc != undefined)

successFunc(addComp)

})

},

function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

if (errorFunc != undefined)

errorFunc(error)

}, { timeout: 5000, enableHighAccuracy: true })

} else {

alert("你的浏览器不支持获取地理位置信息。")

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。")

}

}

var showPosition = function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

})

}

var showPositionError = function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

}

一、PC端通过IP实现定位代码

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>

<script type="text/javascript">

document.write(IPData[0])   //显示IP地址

document.write(IPData[2])   //显示省

document.write(IPData[3])   //显示市

</script>

二、获取客户端地址代码

<script>

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>

为了让网页直接生成添加到手机主屏幕的代码，您需要在网页中添加一些特定的 HTML 代码。例如，您可以使用以下代码：

Markup

<a href="javascript:void(0)" onclick="addToHomeScreen()">

点击这里，将本网页添加到主屏幕

</a>

<script>

function addToHomeScreen() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "block"

a2hsBtn.addEventListener("click", addToHome)

}

function addToHome() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "none"

var a2hsSkip = document.querySelector(".ad2hs-skip")

a2hsSkip.style.display = "none"

var a2hsBranding = document.querySelector(".ad2hs-branding")

a2hsBranding.style.display = "none"

var a2hsLauncher = document.querySelector(".ad2hs-launcher")

a2hsLauncher.style.display = "block"

deferredPrompt.prompt()

deferredPrompt.userChoice.then(function(choiceResult) {

deferredPrompt = null

})

}

</script>

这段代码包含了一个文本链接，用户点击该链接时会触发一个 JavaScript 函数，该函数会显示一个提示框，提示用户是否将网页添加到主屏幕。用户确认后，该网页就会被添加到主屏幕上。

请注意，上述代码仅供参考，您可能需要根据自己的需求进行修改。

JavaScript

<a href="javascript:void(0)" onclick="addToHomeScreen()">

点击这里，将本网页添加到主屏幕

</a>

<script>

function addToHomeScreen() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "block"

a2hsBtn.addEventListener("click", addToHome)

}

function addToHome() {

var a2hsBtn = document.querySelector(".ad2hs-prompt")

a2hsBtn.style.display = "none"

var a2hsSkip = document.querySelector(".ad2hs-skip")

a2hsSkip.style.display = "none"

var a2hsBranding = document.querySelector(".ad2hs-branding")

a2hsBranding.style.display = "none"

var a2hsLauncher = document.querySelector(".ad2hs-launcher")

a2hsLauncher.style.display = "block"

deferredPrompt.prompt()

deferredPrompt.userChoice.then(function(choiceResult) {

deferredPrompt = null

})

}

</script>

如果您不是用户，而是程序员，您可以通过添加特定的 HTML 代码来让网页直接生成添加到手机主屏幕的代码。您可以参考上文中的代码示例，并进行相应的修改。

同时，您也可以使用 Web App Manifest 来为您的网页添加添加到主屏幕的功能。Web App Manifest 是一种 JSON 格式的文件，用于描述网页的一些基本信息，比如网页的名称、图标、启动方式等。您可以在网页的 head 标签中添加一个 link 标签，将 Web App Manifest 的 URL 指向您的网页。例如：

Java

<link rel="manifest" href="https://www.example.com/manifest.json">

JavaScript

然后，您可以在 manifest.json 文件中定义一些相关属性，以便描述网页。例如：

JavaScript

{

"name": "My Awesome Web App",

"short_name": "Awesome App",

"start_url": "./index.html",

"display": "standalone",

"background_color": "#fff",

"theme_color": "#fff",

"icons": [

{

"src": "./icon.png",

"sizes": "192x192",

"type": "image/png"

}

]

}

在这个示例中，我们为网页定义了一些基本属性，比如网页的名称、短名称、启动地址、显示方式等。通过这些属性，用户可以将网页添加到手机主屏幕上，并以“独立”模

非常好！如果您想尝试将网页添加到手机主屏幕，可以按照上述方法进行操作。您可以先添加一些 HTML 代码，然后通过点击相应的按钮来触发添加到主屏幕的操作。或者，您也可以使用 Web App Manifest 来描述网页，并让用户在访问网页时进行添加。

如果您遇到任何问题，可以随时联系我。愿您的尝试顺利！