手机端 添加事件跳转以及不可缩放
来源:互联网 发布:网络神曲2014 编辑:程序博客网 时间:2024/06/06 00:00
var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase(), } function openUrl() { //获取元素节点 if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面 var ua = navigator.userAgent.toLowerCase();//获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") { //在微信中打开// alert("请点击右上角详情,用浏览器打开"); } if (browser.versions.ios) { //是否在IOS浏览器打开 $(".openHttp").attr("href","https://XXXXXXXX"); } if(browser.versions.android){ //是否在安卓浏览器打开 $(".openHttp").attr("href","http://XXXXXXXXX"); } } }
<div class="top"> <a class="openHttp" onclick="openUrl()" style="tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent;"><img src="phone/downloadIOS.png"></a></div><div class="top"> <a class="openHttp" onclick="openUrl()" style="tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent;"><img src="phone/downloadAndriod.png"></a></div>禁止页面缩放:
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />viewport手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。width控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。height和 width 相对应,指定高度。initial-scale初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。maximum-scale最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。user-scalable用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。所有的缩放值都必须在0.01–10的范围之内。(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)<meta name="viewport" content="width=device-width,user-scalable=no" />屏幕密度为高频,中频,低频target-densitydpi=high-dpi(设置屏幕密度为高频,自动缩放,禁止用户手动调整缩放)<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
阅读全文
0 0
- 手机端 添加事件跳转以及不可缩放
- 手机端缩放控制
- 手机版本用户不可以缩放网页设置。
- html禁止手机端缩放
- 跳转H5手机端
- wordpress 添加404 跳转事件 hook
- runtime跳转界面以及动态添加属性
- unity 触摸事件 移动,缩放,以及相机移动超出边界
- Android手机上浏览网页不可缩放,适应屏幕。iPhone手机显示网页,字体等变小了,解决方法
- iOS viewController添加导航条添加跳转以及特效
- 获取手机通讯录以及添加联系人
- php判断手机端跳转
- 识别手机端自动跳转
- html5手机端屏幕缩放标签viewport
- 禁止html在手机端自由缩放
- 手机端 touch 事件
- 关于获取手机网络以及如何跳转到设置界面
- 手机跳转
- codeforces 894 E(scc + dp)
- OpenLayer4叠加geojson数据增加监听事件获取该geojson数据的相关属性
- linux、windows下查看NVIDIA显卡显存使用率
- centos 7 部署 java环境
- 关于Matlab2013a破解版激活不成功的解决方案
- 手机端 添加事件跳转以及不可缩放
- 冒泡排序
- SSH框架中关于Spring自动为Struts2的Action装配参数的误解
- 安卓改变状态栏颜色
- Editplus:使用技巧总结(打开当前文件路径、重命名、配置exe插件)
- git的常见相关命令和操作
- JAVA中enum的几种用法
- js+canvas五子棋
- VUE路由去掉“#”