一些实用的浏览器meta

标签： 兼容性 meta

---

通用

    <!--声明文档使用的字符编码-->
    <meta charset=’utf-8′>    
    <!--viewport定义-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <!--说明：忽略识别页面中的电话号码,邮箱，地址-->
    <meta content="telephone=no,email=no,adress=no" name="format-detection" />
    <!-- 添加 seo页面关键字 -->
    <meta name="keywords" content="" />
    <!-- 添加 seo页面描述 -->
    <meta name="description" content="" />
    <!-- 设置页面不缓存 -->
    <meta http-equiv=”pragma” content=”no-cache”>
    <meta http-equiv=”cache-control” content=”no-cache”>
    <meta http-equiv=”expires” content=”0″>
    <!-- 优先使用最新版本 IE 和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

---

360浏览器

强制浏览器在极速横式下显示
html <!-- 开启极速模式 --> <meta name="renderer" content="webkit|ie-stand|ie-comp">

• IE浏览器有一个兼容模式（IE）和一个极速模式（chrome）,webkit指的是chrome内核，ie-stand指的IE标准内核，ie-comp指的是IE兼容内核，详细说明请查看360浏览器官方解释

---

QQ浏览器

    <!-- 设置屏幕方向 -->
    <meta name="x5-orientation" content="portrait|landscape" />
    <!-- 设置全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- 设置屏幕模式 -->
    <meta name="x5-page-mode" content="app" />

1. 设置屏幕方向为横屏还是竖屏
2. 设置是否全屏，yes表示强制浏览器全屏
3. QQ浏览器应用模式

---

UC浏览器

    <!-- 横屏、竖屏显示 -->
    <meta name="screen-orientation" content="portrait|landscape">
    <!-- 设置是否全屏 -->
    <meta name="full-screen" content="yes">
    <!-- 缩放不出滚动条 -->
    <meta name="viewport" content="uc-fitscreen=no|yes"/>
    <!-- 排版 -->
    <meta name="layoutmode" content="fitscreen|standard" />
    <!-- 夜间模式 -->
    <meta name="nightmode" content="enable|disable"/>
    <!-- 应用模式 -->
    <meta name="browsermode" content="application"/>
    <!-- 强制图片显示 -->
    <meta name="imagemode" content="force"/>

1. 设置屏幕方向为横屏还是竖屏portrait为横屏 | landscapeo为坚屏。
2. 是否全屏，yes表示强制浏览器全屏，no则反之。
3. 缩放不出滚动条。设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
4. 缩放不出滚动条。设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
5. 排版，fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
6. nightmode的值设置为disable后，浏览器的夜间模式就不起作用。
7. UC 浏览器为了节省流量，为用户提供了无图模式。不过我们可以通过这个属性来强制浏览器显示图片，而有时候为了提高用户体验，无图模式还是有必要的，对于有些 图片是不得不显示的，如：验证码，我们也可以单独设置其为显示模式，其他图片可根据用户的设置来进行弹性选择。

Safari浏览器

    <!-- 允许全屏模式浏览 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 定义safari顶端状态条的样式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 开启WEB APP 支持 -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- WEB APP名称 -->
    <meta name="apple-mobile-web-app-title" content="APP名">
    <!-- 隐藏顶部 -->
    <meta name="viewport" content="minimal-ui">

1. 在iOS上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar；
2. 其值有三个： default（白色）black（黑色） black-translucent（灰色半透明）。
3. 开启对web app程序的支持
4. 是指在发送到屏幕的时候默认的命名。
5. 让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

个人所知有限，如果谁还有更实用的浏览器meta，欢迎留意补充，共勉！