关于常用的 meta

判断ie版本和升级提示

  <!--告诉浏览器：应该用哪个内核渲染-->
    <meta name="renderer" content="webkit">
    <!--告诉浏览器：强制使用指定内核-->
    <meta name="force-rendering" content="webkit"/>
    <!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <!--IE浏览器升级提示，劝退低端浏览器-->
    <script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

 

手机浏览器强制全屏 与 页面配置

<!-- 应用的标题 -->
        <meta name="apple-mobile-web-app-title" content="Web App">
        <!--自动将http的请求,升级为https-->
        <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->

        <!-- 添加到主屏幕后，全屏显示 -->
        <meta name="apple-touch-fullscreen" content="yes">
        <!--仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <!--删除苹果默认的工具栏和菜单栏，默认为no显示工具栏和菜单栏。-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
        <meta name="format-detection" content="telephone=no, email=no" />
        <!--windows phone 点击无高光-->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!-- 避免IE使用兼容模式，以最高级别的可用模式显示 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
        <meta name="HandheldFriendly" content="true">
        <!-- 微软的老式浏览器 -->
        <meta name="MobileOptimized" content="320">
        <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">
        <!-- UC强制全屏 -->
        <meta name="full-screen" content="yes">
        <!--UC强制全屏-->
        <meta name="fullscreen" content="yes">
        <!-- QQ强制全屏 -->
        <meta name="x5-fullscreen" content="true">
        <!-- UC应用模式 -->
        <meta name="browsermode" content="application">
        <!-- QQ应用模式 -->
        <meta name="x5-page-mode" content="app">
        <!-- 点击无高光(高亮) -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- 页面可视区域宽度，是否可手动缩放，初始的缩放比例，允许用户缩放到的最大比例，允许用户缩放到的最小比例 -->
        <meta name="viewport" content=" maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, initial-scale=1.0,width=device-width,height=device-height">
        <!-- 向搜索引擎说明网页的关键词 -->
        <meta name="keywords" contect="菜汤不甜"/>
        <!-- 告诉搜索引擎站点的主要内容 -->
        <meta name="Description" contect="菜汤不甜">
        <!-- 告诉搜索引擎站点的制作的作者 -->
        <meta name="Author" contect="菜汤不甜">

 

使用meta 进行页面触摸缩放控制

最近在整一个h5项目 涉及到页面缩放（要求：手机端在指定页面双指可以进行网页的缩放）  于是就直接设置了meta

<!-- 页面可视区域宽度，是否可手动缩放，初始的缩放比例，允许用户缩放到的最大比例，允许用户缩放到的最小比例 -->
        <meta name="viewport" id="meta-user-scalable" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=10.0, minimum-scale=0.5">

介于需求（指定页面） meta 是要可以动态设置的，于是加了js操作 如下

if(e){//开启缩放
        document.getElementById('meta-user-scalable').setAttribute('content', 'width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=10.0, minimum-scale=0.5');
}else{//关闭缩放（并恢复原状）
        document.getElementById('meta-user-scalable').setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1');
}

 参考文章：使用js还原浏览器的缩放