您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

手机移动端meta属性基础知识整理

发布时间:2017-07-22编辑:余斗阅读:(0)字号:
    H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
     
    忽略将页面中的数字识别为电话号码

    <meta name="format-detection" content="telephone=no" />
     
    忽略Android平台中对邮箱地址的识别

    <meta name="format-detection" content="email=no" />
     
    当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- ios7.0版本以后,safari上已看不到效果 -->
     
    将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 可选default、black、black-translucent -->
     
    viewport通用模板

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>标题</title>
    <link rel="stylesheet" href="http://lailaikeji.com/spa" style="color:#91268F">"index.css">
    </head>
    <body>
    这里开始内容
    </body>
    </html>
     
    viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>标题</title>
    <link rel="stylesheet" href="http://lailaikeji.com/spa" style="color:#91268F">"index.css">
    </head>
    <body>
    这里开始内容
    </body>
    </html>
     
关键字词移动端meta
余斗余斗
  1. 转载请注明:手机移动端meta属性基础知识整理
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-07-22最后更新
鼠标放在span元素上指针变小手的实现方法
JS实现模拟触发按钮点击功能
手机扫一扫 随身带着看
鸿运国际手机登录首页