移动端 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'> ...
随机推荐
- 获取SqlServer2005表结构(字段,主键,外键,递增,描述)
1.获取表的基本字段属性 --获取SqlServer中表结构 SELECT syscolumns.name,systypes.name,syscolumns.isnullable, syscolumn ...
- hihoCoder 搜索一·24点
题目1 : 搜索一·24点 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 周末,小Hi和小Ho都在家待着.在收拾完房间时,小Ho偶然发现了一副扑克,于是两人考虑用这副扑 ...
- A Round Peg in a Ground Hole(凸包应用POJ 1584)
A Round Peg in a Ground Hole Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5684 Accepte ...
- JAVA基础知识之网络编程——-TCP/IP协议,socket通信,服务器客户端通信demo
OSI模型分层 OSI模型是指国际标准化组织(ISO)提出的开放系统互连参考模型(Open System Interconnection Reference Model,OSI/RM),它将网络分为七 ...
- protobuf安装
Protocol Buffers - Google's data interchange format 一.简介 名字已经很好的说明它是什么,这里还是要简单的介绍一下,protobuf是protoco ...
- Windows手动添加开机启动项
@方法1. 添加程序完整路径到注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run下 或者添加到HKEY_CURREN ...
- InputStream和Reader区别
InputStream,OutputStream 前者为字节输入流,后者为字节输出流.Reader Writer 前者为字符输入流,后者为字符输出流. 四个均为抽象类.fileInputStr ...
- MySQL的事务
MySQL的事务 1.事务:事务是由一步或者几步数据库操作序列组成的逻辑执行单元,这一系列操作要么全部执行,要么全部放弃执行. 2.事务具备的四个特性(简称为ACID性): (1)原子性(Atomic ...
- tomcat和mysql安装配置总结
我安装的tomcat和mysql都是解压缩版的.安装和配置tomcat倒没花费我多少时间,主要是mysql,几乎花费了我一天的时间. Tomcat安装总结: 首先将下载好的tomcat压缩包解压放在其 ...
- Linux的启动过程
Linux的启动过程,也就是Linux的引导流程,这部分主要是理论知识. Linux的开机启动过程 1.1第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的 ...