移动端 meta
摘自http://www.cnblogs.com/shxydx/articles/2856882.html
控制显示区域各种属性:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的宽度
- height – viewport的高度
- initial-scale - 初始的缩放比例
- minimum-scale - 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
IOS中Safari允许全屏浏览:
<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari顶端状态条样式:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略将数字变为电话号码:
<meta content="telephone=no" name="format-detection">
一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!
IOS中Safari设置保存到桌面图标:
这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
// 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触摸事件 gesturestart //当两个手指接触屏幕时触发 gesturechange //当两个手指接触屏幕后开始移动时触发 gestureend // 屏幕旋转事件 onorientationchange // 检测触摸屏幕的手指何时改变方向 orientationchange // touch事件支持的相关属性 touches targetTouches changedTouches clientX // X coordinate of touch relative to the viewport (excludes scroll offset) clientY // Y coordinate of touch relative to the viewport (excludes scroll offset) screenX // Relative to the screen screenY // Relative to the screen pageX // Relative to the full page (includes scrolling) pageY // Relative to the full page (includes scrolling) target // Node the touch event originated from identifier // An identifying number, unique to each touch event |
4. 屏幕旋转事件:onorientationchange
添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:
// 判断屏幕是否旋转 function orientationChange() { switch (window.orientation) { case 0: alert( "肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); break ; case -90: alert( "左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); break ; case 90: alert( "右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); break ; case 180: alert( "风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); break ; };<br>}; // 添加事件监听 addEventListener( 'load' , function (){ orientationChange(); window.onorientationchange = orientationChange; }); |
5. 隐藏地址栏 & 处理事件的时候,防止滚动条出现:
// 隐藏地址栏 & 处理事件的时候 ,防止滚动条出现 addEventListener( 'load' , function (){ setTimeout( function (){ window.scrollTo(0, 1); }, 100); }); |
6. 双手指滑动事件:
// 双手指滑动事件 addEventListener( 'load' , function (){ window.onmousewheel = twoFingerScroll;}, false // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段) ); function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ,而后执行相应操作 return true ; }; |
7. 判断是否为iPhone:
// 判断是否为 iPhone : function isAppleMobile() { return (navigator.platform.indexOf( 'iPad' ) != -1); }; |
8. localStorage:
例子 :(注意数据名称 n 要用引号引起来)
var v = localStorage.getItem( 'n' ) ? localStorage.getItem( 'n' ) : "" ; // 如果名称是 n 的数据存在 ,则将其读出 ,赋予变量 v 。 localStorage.setItem( 'n' , v); // 写入名称为 n、值为 v 的数据 localStorage.removeItem( 'n' ); // 删除名称为 n 的数据 |
9. 使用特殊链接:
如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
< a href = "tel:12345654321" >打电话给我</ a > < a href = "sms:12345654321" >发短信</ a > 或用于单元格: < td onclick = "location.href='tel:122'" > |
10. 自动大写与自动修正
要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项:
< input type = "text" autocapitalize = "off" autocorrect = "off" /> |
移动端 meta的更多相关文章
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 移动端meta 解释
移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...
- 关于移动端meta设置
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initi ...
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- 关于浏览器兼容问题——还有移动端meta问题
<!DOCTYPE html><!--[if lt IE 7]> <html dir="ltr" lang="en-US" cla ...
- 移动端meta整理
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- PC端meta标签
下面介绍meta标签的几个属性,charset,content,http-equiv,name. 一.charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆 ...
- 移动端meta标签
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...
- 移动端<meta>属性配置讲解(整理)
meta标签,是head区的辅助标签 HTML代码如下: <meta charset="utf-8"><meta http-equiv="X-UA-Co ...
- 移动端meta的使用
伴随着web app的不断火热,移动端可以说是未来的大趋势了,下面是常用的一下meta <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> ...
随机推荐
- 理解 Android Build 系统
在配置了以上的文件之后,便可以编译出我们新添加的设备的系统镜像了. 首先,调用“source build/envsetup.sh”该命令的输出中会看到 Build 系统已经引入了刚刚添加的 vendo ...
- Entity Framework 第六篇 分页查询
目前分页支持单表 , ) where TEntity : class { ) * size; var _reset = Get(filter, orderBy); total = _reset.Cou ...
- Codeforces Round #372 (Div. 2) C
Description ZS the Coder is playing a game. There is a number displayed on the screen and there are ...
- VS为VC++添加UAC控制(VC程序默认管理员运行)
1.VS编译链接VC++工程生成文件默认是没有管理员权限的 生成的程序图标是没有盾牌的如图: 如果程序需要在C盘做些写入操作 就必须具有管理员权限 所以需要在工程中进行设置. 注:自己项目的安装程序安 ...
- centos7 安装 mariadb 的正确命令
使用的是linode的centos7系统,安装mysql发现已经默认的是mariadb. 但是不管是使用linode官网说明还是百度搜索到的的根本安装方法无法安装成功. 总是提示这一句: ERROR ...
- C#实现ActiveX控件开发与部署
现在,我们手里已经有了这个控件包:QRCode.cab,下面我们编写一个测试的网页 <html> <head> <title>无标题页</title> ...
- CF 504E Misha and LCP on Tree(树链剖分+后缀数组)
题目链接:http://codeforces.com/problemset/problem/504/E 题意:给出一棵树,每个结点上有一个字母.每个询问给出两个路径,问这两个路径的串的最长公共前缀. ...
- 可是把ie67下面的bug改好了,其实很简单,ie67下面取出来的字符串是带有空格的,不知道为什么
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery模拟鼠标点击事件失效的问题
最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...
- 【转载】ADO,OLEDB,ODBC,DAO的区别
原文:ADO,OLEDB,ODBC,DAO的区别 ODBC(Open Database Connectivity,开放数据库互连) 1992年,微软公司开放服务结构(WOSA,Windows Open ...