首页 > 代码库 > 移动端 meta
移动端 meta
控制显示区域各种属性:
<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="http://www.mamicode.com/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=http://www.mamicode.com/‘tel:122‘" > |
10. 自动大写与自动修正
要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项:
< input type = "text" autocapitalize = "off" autocorrect = "off" /> |
移动端 meta
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。