美文网首页
移动端 meta

移动端 meta

作者: 65_刘璐 | 来源:发表于2017-03-10 09:15 被阅读17次

    控制显示区域各种属性:

    <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

    1. 屏幕旋转事件: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;
      };
      };
      // 添加事件监听
      addEventListener('load', function(){
      orientationChange();
      window.onorientationchange = orientationChange;
      });
    1. 隐藏地址栏 & 处理事件的时候,防止滚动条出现:
      // 隐藏地址栏 & 处理事件的时候 ,防止滚动条出现
      addEventListener('load', function(){
      setTimeout(function(){ window.scrollTo(0, 1); }, 100);
      });
    1. 双手指滑动事件:
      // 双手指滑动事件
      addEventListener('load',  function(){ window.onmousewheel = twoFingerScroll;},
      false // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
      );
      function twoFingerScroll(ev) {
      var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ,而后执行相应操作
      return true;
      };
    1. 判断是否为iPhone:
      // 判断是否为 iPhone :
      function isAppleMobile() {
      return (navigator.platform.indexOf('iPad') != -1);
      };
    1. localStorage:
      例子 :(注意数据名称 n 要用引号引起来)
      var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ,则将其读出 ,赋予变量 v 。
      localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据
      localStorage.removeItem('n'); // 删除名称为 n 的数据
    1. 使用特殊链接:
      如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
      <a href="tel:12345654321">打电话给我</a>
      <a href="sms:12345654321">发短信</a>
      或用于单元格:
      <td onclick="location.href='tel:122'">
    1. 自动大写与自动修正
      要关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项:
      <input type="text" autocapitalize="off" autocorrect="off" />

    相关文章

      网友评论

          本文标题:移动端 meta

          本文链接:https://www.haomeiwen.com/subject/cllngttx.html