分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

一些实用的浏览器meta

发布时间:2023-09-06 01:46责任编辑:顾先生关键词:浏览器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,欢迎留意补充,共勉!

一些实用的浏览器meta

原文地址:https://www.cnblogs.com/xwwin/p/8650218.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved